Display form in bootstrap modal on button click using Datatables - button

Question

Having a JQuery Datatable (it's more complex I simplified it) as below:
I need to display a bootstrap modal form with a text input field on, whenever I click the "Assign Card" button.
The modal should should be populated with the data coming from the row in which the button was clicked.
Upon clicking the modal "Assign" button, normally I should post the inputed value and the "VisitorID" which like "John Doe" should come from the specific row.
On Assign I should post the "input value" and "VisitorID".
What I have so far:
var table = $('#visitorsTable').DataTable({
"ajax": {
...
},
"columns": [
{ "data": "VisitorID" },
{ "data": "FirstName" },
{ "data": "LastName" },
{
"data": "CheckedIn",
"render": function(d) {
return moment(d).format('DD-MM-YYYY HH:mm');
}
},
{"data": "CardNumber"},
],
columnDefs: [
{
targets: [0], // Visitor ID
visible: false
},
{
targets: [-1],
render: function(cardNUmber, b, data, d) {
return '<button class="btnAssignCard data-toggle="modal" data-target="#assignCardModal" float-right">Assign Card</button>';
}
}
]
});
$('#visitorsTable').on('click',
'.btnAssignCard',
event => {
// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
let rowData = table.row($(event.target).parents('tr')).data();
var visitorID = rowData.VisitorID;
var visitorFirstName = rowData.FirstName;
var visitorLastName = rowData.LastName;
});
});

Answer 1

Remove the data-toggle and data-target from the button.
Then call the below function after
// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
let rowData = table.row($(event.target).parents('tr')).data();
var visitorID = rowData.VisitorID;
var visitorFirstName = rowData.FirstName;
var visitorLastName = rowData.LastName;
showMyModalSetInput(visitorFirstName + visitorLastName,visitorID );
The function will open the modal and pass the required values before opening. Also, for visitor id, you can add an extra hidden input.
function showMyModalSetInput(inputText, visitorID) {
$('#inputId').val(inputText);
$('#hiddenInputforVisitorID').val(visitorID);
$('#assignCardModal').modal('show');
}