Recently, I came across a small piece of HTML containing two input boxes, a checkbox, and an "Add" button:
<div class="row">
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="items" name="items" placeholder="Enter item description">
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-xs-3">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="in-order" name="in-order">
</div>
</div>
</div>
<div class="form-group col-xs-2">
<div class="btn btn-primary" id="add-btn">Add</div>
</div>
</div>
</div>
<div id="persisted-items"></div>
I've been trying to figure out how to extract the data entered into the text boxes and display it in the bottom div "persisted-items" once the Add button is clicked. Additionally, I'd like to have a "Delete" icon or link next to each entry so I can remove them if needed.
Although I attempted a similar approach using table rows, I couldn't make much progress.
Here is a snippet of what I tried:
$('#add-btn').click(function(){
$("#persisted-items").append($("#items").val());
$("#persisted-items").append($("#quantity").val());
$("#persisted-items").append($("#in-order").val());
});
If anyone has any insights or solutions on how to achieve this functionality, I would greatly appreciate the help. Thank you!