Can't understand what's the problem?

$(document).ready(function(){
 var di = $('select').size() + 1; 
 $('#add').click(function() {
 $('select#wday').clone().attr('id', 'wdays').fadeIn('slow').appendTo('.worked');
di++;
});
 $('#remove').click(function() {
 if(di > 1) {
$('#wdays:last').remove();
 di--; 
}
 }); 
});

<a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a>

the code copies the select. But when you remove the selects do not want deleted until the number of deletions reaches half of the copied elements. That is, if I have 10 copies I begin to remove them one by one I they remain until the amount is equal to the number of elements on the page (5) and only after that they begin to shrink by one element, respectively 4 on page 4 is not deleted 2 on page two non-remote and so on. Whether it is possible as that to solve?
March 19th 20 at 08:24
1 answer
March 19th 20 at 08:26
Solution
Everything works


That's just not right to produce as many elements with the same id!
Isn't it better to do so:
I don't know what some other reason. But the project is why it is so. - vada.Stiedemann commented on March 19th 20 at 08:29
@vada.Stiedemann, it is necessary to watch the entire project - vinnie45 commented on March 19th 20 at 08:32

Find more questions by tags JavaScript