使用相同的类名将元素追加到动态生成的div-jQuery

Question

I have a toDo list for the very first list, I can add elements. I can also create multiple toDo lists dynamically, but while adding here it is been added to the very first list instead of the respective list where I click. Please someone help me, I am very new to JavaScript.

 $toDoList = $('#toDoList'); $newTodoList = $('#newTodoList'); $parent = $('#parent'); $ul = $('ul'); $totalList = $('.totalList'); $(".remove").click(function() { confirm('Are you sure? do you want to delete the item') ? $(this).parent().remove() : $(this); }); $("li").click(function() { $(this).hasClass("addBorder") ? $(this).removeClass("addBorder") : $(this).addClass("addBorder"); }); $('body').on('click', '.add', function() { var itemName = $('#itemName').val(); var listItem = $('<li>' + itemName + '<button type="button" class="buttonStyle">-</button></li>'); listItem.on("click", function() { confirm('Are you sure? do you want to delete the item') ? $(this).remove() : $(this); }); $totalList.append(listItem); $('#itemName').val(''); }); index = 1; i = 1; function addNewList() { var newList = $('<div class="listParent" id="newList"><button type="button" class="addNewList" onClick="addNewList()">+</button><h2>My ToDO List!!</h2><ul id="toDoList" class="totalList"><li>Java script<button type="button" class="remove buttonStyle">-</button></li><li>Angular<button type="button" class="remove buttonStyle">-</button></li><li>Jasmine<button type="button" class="remove buttonStyle">-</button></li></ul><div class="inputText"><input type="text" id="itemName" class="leftmargin10" name="ListItem"><button type="button" id="addButton" class="buttonPlacement buttonStyle add">+</button></input></div></div>'); $('#newList').clone().attr('id', 'newList' + index++) .insertAfter($('[id^=newList]:last')); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent" id="parent"> <div class="listParent" id="newList"> <button type="button" class="addNewList" onclick="addNewList()">+</button> <h2>My ToDO List!!</h2> <ul id="toDoList" class="totalList"> <li>Java script<button type="button" class="remove buttonStyle">-</button></li> <li>Angular<button type="button" class="remove buttonStyle">-</button></li> <li>Jasmine<button type="button" class="remove buttonStyle">-</button></li> </ul> <div class="inputText"> <input type="text" id="itemName" class="leftmargin10" name="ListItem"><button type="button" id="addButton" class="buttonPlacement buttonStyle add">+</button></input> </div> </div> <!-- New list --> 

Answer 1

I assume that you click the + to add an item to a list.

You have this line of code:

$totalList.append(listItem);

In theory that should append listItem to every list which has class='totalList', I think you want it added only to the list where the + button was clicked, so I would change that line to

$(this).closest('.totalList').append(listItem);

Answer 2

The first thing I saw was that you are using multiple times the same id .

So I removed them all, since the "to do list" is to be cloned.
I simplified your code... I hope this will help.

 // Remove (Delegate the clicks) $(document).on("click",".remove",function(){ confirm('Are you sure? do you want to delete the item')? $(this).parent().remove():$(this); }); // Li border (Delegate the clicks) $(document).on("click","li",function(){ $(this).hasClass("addBorder")?$(this).removeClass("addBorder"):$(this).addClass("addBorder"); }); // Add a to do item to the list where the add button has been clicked. $('body').on('click', '.add', function () { // Find the relevant elements. var thisParent = $(this).closest(".listParent"); var newTodoVal = thisParent.find(".newToDo"); var thisList = thisParent.find(".totalList"); // If there in a name inputed. if(newTodoVal.val() !=""){ var listItem = "<li>"+newTodoVal.val()+"<button type='button' class='buttonStyle'>-</button>"; thisList.append(listItem); newTodoVal.val(''); } }); // Clone the last list to create a new one. $(".addNewList").on("click",function(){ var lastList = $(".listParent").last(); lastList.clone().insertAfter(lastList); }); 

 .addBorder{ border:1px solid black; max-width:10em; } .leftmargin10{ margin-left:10px; } .buttonStyle{ margin-left:0.5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <button type="button" class="addNewList">+</button> <div class="listParent"> <h2>My ToDO List!!</h2> <ul class="totalList"> <li>Java script<button type="button" class="remove buttonStyle">-</button></li> <li>Angular<button type="button" class="remove buttonStyle">-</button></li> <li>Jasmine<button type="button" class="remove buttonStyle">-</button></li> </ul> <div class="inputText"> <input type="text" class="leftmargin10 newToDo" name="ListItem"> <button type="button" class="buttonPlacement buttonStyle add">+</button> </div> </div> <!-- New list --> </div>