title: Display form in bootstrap modal on button click using Datatables
body: <p>Having a JQuery Datatable (it's more complex I simplified it) as below:  </p>
  
  <p><a href="https://i.stack.imgur.com/BdAco.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BdAco.png" alt="JQuery Datatable"></a></p>
  
  <p>I need to display a bootstrap modal form with a text input field on, whenever I click the "Assign Card" button.</p>
  
  <p>The modal should should be populated with the data coming from the row in which the button was clicked.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/IPJzP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IPJzP.png" alt="Bootstrap modal form"></a></p>
  
  <p>On Assign I should post the "input value" and "VisitorID".</p>
  
  <p>What I have so far:</p>
  
  <pre><code>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 '&lt;button class="btnAssignCard data-toggle="modal" data-target="#assignCardModal" float-right"&gt;Assign Card&lt;/button&gt;';                           
                      }
                  }
              ]
          });
  
          $('#visitorsTable').on('click',
              '.btnAssignCard',
              event =&gt; {
                  // 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;
  
              });
      });
  </code></pre>