I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed.
However, a problem arises as more items are added – instead of having one button per item, multiple buttons start appearing for each item in the list. This is not the intended behavior; there should only be one button per item. Can you review my code and provide some assistance? Thank you!
$(document).ready(function() {
$('#removebox').hide();
//When you click send it sends the item to the list
$('#send').click(function() {
var userMessage = $('.text-box').val();
$('.text-box').val('');
//If theres nothing in the text-box and send is clicked an alert pops up
if (!userMessage) {
alert("Please add some items to the list!")
} else {
//This appends the item typed into the text-box to the list
$('.container').append('<li>' + userMessage + '</li>');
addBox();
}
});
//This adds the remove button next to each item in the list
function addBox() {
$('.container li').append($('#removebox'));
$('#removebox').show();
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title" width="100%">
<p> Shopping List</p>
</div>
<div class="container">
<input class="text-box" placeholder="Please enter an item">
<button id="send">submit</button>
<button id="removebox">X</button>
</div>