I am having trouble with saving and deleting values in a table row. I have an input field and an add button. When I click on the add button, I want the input value to be saved in a table row with a delete button next to it. I need to be able to delete individual values. I have tried using jQuery, and while I can add values to the table, I am unable to delete them. Here is my code. Any help would be appreciated.
https://i.sstatic.net/mqmRE.jpg
<div class="col-sm-6 col-md-5">
<div class="form-group">
<label class="control-label" for="supplyingLocation">Supplying to Location <span class="text-danger">*</span></label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Supplying Location Name" name="supplyingLocation" id="supplyingLocation" required="required">
<div class="input-group-btn">
<button class="btn btn-primary add-supplying-location-row" type="button">Add Location </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-sm-5">
<div class="listing-table">
<div class="table-responsive sup-loc-table">
<table class="table table-bordered">
<thead>
<tr>
<th>Supplying to Location</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".add-supplying-location-row").click(function(){
var supname = $("#supplyingLocation").val();
$('#supplyingLocation').val('');
var supmarkup = "<tr><td>" + supname + "</td><td><input type='button' name='supplyingLocRecord' value='Delete' id='deletesupLoc'></td></tr>";
$(".sup-loc-table table tbody").append(supmarkup);
});
// Find and remove selected table rows
$("#deletesupLoc").click(function(){
$(".sup-loc-table table tbody").find('input[name="supplyingLocRecord"]').each(function(){
{
$(this).parents("tr").remove();
}
});
});
});
</script>