anyone know why only every other item works as intended?

Question

when I add the first one it works fine. if I add another, the first stops working and the second one works. at 9 items the list is 101010101 at 10 it's 0101010101 (0-it doesn't work as intended, 1-you get it) https://code.sololearn.com/W4lKqi2R4VPX/?ref=app

Answer 1

This is my approach. I gave a Id to li element so now on it know on which element​ it should set the class.
In previous code (ur code ) it doesn't know on what element it should perform class setting. it applied to all li elements​. I tried giving unique ID.

$(function() {
var elId = 10; //create id
$("#add").on("click", function() {
var val = $("input").val();
if(val !== '') {
elId++;//increment Id to generate unique id
var elem = $("<li id =" + elId + "></li>").text(val);
$("#mylist").append(elem);
$("input").val("");
$("#"+elId).on("click", function() {
$(this).toggleClass("done");
});
}
});
});