how to add a form with a unique id on jquery?

add dynamic form with unique id using jquery

I have list like this, <input type="button" value="add" id="add"/> <ul id="sortable"> <li class="ui-state-default" id="list_1">Item 1</li> <li class="ui-state-default" id="list_2">Item 2</li> <li class="ui-state-default" id="list_3">Item 3</li> <li class="ui-state-default" id="list_4">Item 4</li> <li class="ui-state-default" id="list_5">Item 5</li> <li class="ui-state-default" id="list_6">Item 6</li> <li class="ui-state-default" id="list_7">Item 7</li> Now I have an add button just above the list called add. When I am clicking add button it is appending the <li> something</li> to the list. But I want a unique id for it. Like the last <li>id is list_7, so I want the new id to be list_8. I am using this javascript code at the moment. $('#add').click(function(){ $('#sortable').append('<li>something</li>'); }) Kindly help me with this. thanks
Answer:

If you just want to add it based upon the number of li in the ul you can just query the length to build your id. $('#add').click(function() { var $li = $('<li>something</li>'); var theId = 'list_' + ($("#sortable li").length + 1); $li.attr("id", theId); $('#sortable').append($li); }); Code example on http://jsfiddle.net/markcoleman/WLrtm/. Updated If you want to delete somewhere in the ul you can easily keep track of the starting index and just increment from there. For simplicity sake I just made the click li remove the item. var index = $("#sortable li").length; $('#add').click(function() { index = index + 1; var $li = $('<li>something</li>'); var theId = 'list_' + (index); $li.attr("id", theId); $('#sortable').append($li); }); $("#sortable").delegate("li", "click", function(){ $(this).remove(); }); Note: since items are added dynamically you need to use either http://api.jquery.com/live/ or http://api.jquery.com/delegate/ Updated http://jsfiddle.net/markcoleman/WLrtm/1/ with delete.

mad_programmer at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

You can use jQuery to get the number of LIs, and use that as the basis of your next index. For instance: var list = $('#sortable'); //Cache since you reference it multiple times function addLi() { var index = list.find('li').length + 1; list.append('<li id="list_'+index+'"></li>'); } $('#add').click(addLi); UPDATED - Taking into account a "delete" behavior Ok, if you wanted to delete, I might do something along the following lines. Note that the LI index is now less tied to the number of actual LIs on the page at any given point, so you can delete safely. //Variables that will be set on document ready var liIndex = 0; var list = ''; function addLi() { list.append('<li id="list_'+(liIndex + 1)+'"><button class="remove">Remove</button> Item</li>'); liIndex += 1; } $(function(){ //Cache for later reference list = $('#sortable'); liIndex = list.find('li').length; //Add an LI whenver you click the add button $('#add').click(addLi); //Remove LI when click on button $('button.remove').live('click',function(){ //Fade out before removing for smoother transition $(this).closest('li').fadeOut(250,function(){ $(this).remove(); }); }); });

Philip Schweiger

If you don't have a delete function, then this is as simple as just counting the number of items inside your container. $('#add').click(function(){ var container = $('#sortable'); var item = $('<li>something</li>') .attr('id','list_' + container.find('li').length + 1); container.append(item); });

Richard Neil Ilagan

Related Q & A:

How to Search using jQuery ASP.Net?Best solution by Stack Overflow
How to create your own slider using jQuery?Best solution by Stack Overflow
how to set value in ckeditor using jquery?Best solution by Stack Overflow
how to submit form using jquery mobile?Best solution by Stack Overflow
How do I get Browser's tab unique id?Best solution by Stack Overflow

Just Added Q & A:

How many active mobile subscribers are there in China?Best solution by Quora
How to find the right vacation?Best solution by bookit.com
How To Make Your Own Primer?Best solution by thekrazycouponlady.com
How do you get the domain & range?Best solution by ChaCha
How do you open pop up blockers?Best solution by Yahoo! Answers

For every problem there is a solution! Proved by Solucija.

Got an issue and looking for advice?
Ask Solucija to search every corner of the Web for help.
Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.