Looking to create a dynamic list where users can easily add new items by clicking a button. As each item is added, a corresponding remove button should also be displayed.
The issue I'm facing is that every time a new item is added, an extra close button is appended, causing a cascading effect like this:
.
..
...
....
.....
......
Below is the Javascript code I'm using:
$('a').on('click', function(e){
e.preventDefault();
var a = $(this).closest('form').find('ol, li').last().html();
console.log(a);
var closeButton = "<a href='#' class='remove-upgrade-field'>Remove</a>"
$('<li>' + a + closeButton + '</li>' ).appendTo('ol');
});
$('.remove-upgrade-field').live('click', function(e){
e.preventDefault();
$(this).closest('li').remove();
});