How do I increment data attributes(int) using jquery?

Question

I want to add somethin y input in my ol, i do it, when i write something in input filed and click add i create li, then i want to add to li data attribute which will increment, when will create new li in the picture there is a code[1]: https://i.stack.imgur.com/oAr6V.png

this is what i tried so far (data-id is not adding to newlt created li's):-

 $(".add").click(function() { var $val = $(".taskk"); var value = $val.val(); if(value === "") { $(".error").text("Fill in the task"); } else { $(".error").text(""); var newLi = $('<li>' + value + '</li>'); $('.toDo ol').append((newLi)); /*newLi.each(function() { $(this).attr("data-id", i++); console.log(i++); $('.toDo ol').append((newLi)); }); $('.toDo ol').append((newLi)); */ } }) 

 body { background-color: #34545E; } .wrapper { max-width: 1200px; width: 100%; margin: auto; } .flexbox { display: flex; justify-content: space-between; margin-top: 100px; } .box { min-width: 280px; min-height: 250px; border: 2px solid transparent; background-color: grey; } h1 { text-align: center; background-color: aliceblue; padding: 5px; } form { display: flex; flex-direction: column; margin-top: 40px; } input[type="text"] { height: 80px; } input[type="button"], button { padding: 10px; width: 100px; margin-top: 20px; background-color: #000; border: 1px solid transparent; color: #fff; font-weight: bold; cursor: pointer; } ol { list-style-position: inside; } ol li { padding: 7px; margin-top: 2px; word-wrap: break-word; } .toDo ol li { background-color: #ffffff; } .compl ol li { background-color: #F35369; } .draft ol li { background-color: #ffffff; color: grey; opacity: 0.8; text-decoration: line-through; } .delete { background-color: #000000; } .error { padding-top: 20px; color: red; } .add { padding: 20px; background-color: black; margin-top: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="flexbox"> <div class="box1"> <h1>To do list</h1> <div class="box toDo"> <ol> </ol> </div> </div> <div class="box2"> <h1>Drafts</h1> <div class="box draft"> <ol> </ol> </div> <button type="submit">Delete</button> </div> <div class="box3"> <h1>Add a task</h1> <div class="box"> <p class="error"></p> <form action="" method="post"> <input type="text" name="name" placeholder="Description" class="taskk"> <input type="button" name="add" value="Add task" class="add"> </form> </div> </div> </div> </div> 

Answer 1

You can do it like below:-

check pre-existing li length and add 1 to it and add it as data-id of newly created li

var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');// check pre-existing `li` length and add 1 to it and add it as data-id of newly created `li`

Working snippet:-

 $(".add").click(function() { var $val = $(".taskk"); var value = $val.val(); if(value === "") { $(".error").text("Fill in the task"); } else { $(".error").text(""); var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>'); $('.toDo ol').append((newLi)); } }); 

 body { background-color: #34545E; } .wrapper { max-width: 1200px; width: 100%; margin: auto; } .flexbox { display: flex; justify-content: space-between; margin-top: 100px; } .box { min-width: 280px; min-height: 250px; border: 2px solid transparent; background-color: grey; } h1 { text-align: center; background-color: aliceblue; padding: 5px; } form { display: flex; flex-direction: column; margin-top: 40px; } input[type="text"] { height: 80px; } input[type="button"], button { padding: 10px; width: 100px; margin-top: 20px; background-color: #000; border: 1px solid transparent; color: #fff; font-weight: bold; cursor: pointer; } ol { list-style-position: inside; } ol li { padding: 7px; margin-top: 2px; word-wrap: break-word; } .toDo ol li { background-color: #ffffff; } .compl ol li { background-color: #F35369; } .draft ol li { background-color: #ffffff; color: grey; opacity: 0.8; text-decoration: line-through; } .delete { background-color: #000000; } .error { padding-top: 20px; color: red; } .add { padding: 20px; background-color: black; margin-top: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="flexbox"> <div class="box1"> <h1>To do list</h1> <div class="box toDo"> <ol> </ol> </div> </div> <div class="box2"> <h1>Drafts</h1> <div class="box draft"> <ol> </ol> </div> <button type="submit">Delete</button> </div> <div class="box3"> <h1>Add a task</h1> <div class="box"> <p class="error"></p> <form action="" method="post"> <input type="text" name="name" placeholder="Description" class="taskk"> <input type="button" name="add" value="Add task" class="add"> </form> </div> </div> </div> </div>