How can I dynamically add and remove values from a table based on radio button selections? My goal is to add the selected value to the table and hide it from the radio button list, and if the value is deleted from the table, I want to show it back in the radio button list. Any suggestions or ideas on how to achieve this?
Radio Button List:
foreach (var item in Model.ServicesList)
{
<div class="col-md-4">
<div class="funkyradio-default">
@Html.RadioButtonFor(model => model.SelectedServiceID, @item.ServiceID, new { @class = "form-control ", @id = @item.ServiceID, @required = "required", title = "Select Service" })
<label name="ServiceName" id="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3a09681859a9096bd929e96acb39a87969edda09681859a9096bab7">[email protected]</a>" for="@item.ServiceID"> @item.ServiceName</label>
@Html.ValidationMessageFor(model => model.SelectedServiceID, "", new { @class = "validation-label" })
</div>
</div>
}
Table:
<div class="row ">
<div class="col-6">
<table class="table main-table" id="ServicesTable">
</table>
</div>
JQuery Function:
function AddNewService() {
var SelectedServiceID = $('[name="SelectedServiceID"]:checked').val();
$.ajax({
type: "Post",
url: '/IndividualLicense/CheckServiceRequirment',
data: { "SelectedServiceID": $('[name="SelectedServiceID"]:checked').val(), "MainServiceID": $('#MainServiceID').val() },
success: function(data) {
if (data.Result == true) {
var table = document.getElementById("ServicesTable");
var Services = [];
Services.push({
'SelectedServiceID': SelectedServiceID,
'MainServiceID': $("#MainServiceID").val(),
'ServiceName': $("#ServiceName_" + SelectedServiceID).text(),
});
for (i = 0; i < Services.length; i++) {
let content = "<tr style='border-bottom: 1px solid #dee2e6;'>";
for (j = 0; j < Services.length; j++) {
content += '<td>' + Services[j].ServiceName + '</td>';
content += "<td><div><button id='" + Services[j].SelectedServiceID + "' class='btn btn-view delete' name='delete' type='button'>Delete</button></div></td>";
content += '<td style="display:none">' + Services[j].SelectedServiceID + '</td>';
content += '<td style="display:none">' + Services[j].MainServiceID + '</td>';
}
content += "</tr>";
$('#ServicesTable').append(content);
}
}
});
}