JSFiddle - React, Tailwind, and code Playground

by Maksim

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>

</div>
<div>
  <table class="display table" id="example" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        <th>Action 1</th>
        <th>Action 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalCommentAction" data-refno="@item.IntraSerialNo" data-tag="comment" data>Remove</button></td>
        <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalAmendAction" data-refno="@item.IntraSerialNo" data-tag="comment">Amend</button></td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
        <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalCommentAction" data-refno="@item.IntraSerialNo" data-tag="comment">Remove</button></td>
        <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalAmendAction" data-refno="@item.IntraSerialNo" data-tag="comment">Amend</button></td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
       ...

JavaScript

var table;
$(document).ready(function() {
  table = $('#example').DataTable();

  table.on("click", "tr", function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    var d = row.data();
    var amendbtn = $(d[7]);
    var idx = row.index();
    amendbtn.data('index', idx);
    console.log(amendbtn.html());
    $('#modalAmendAction').data('rowindex', idx);

    //alert(idx);
    //alert(amendbtn);
  });

  $('#modalAmendAction').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var request = button.data('index');
    var rIdx = $(this).data('rowindex');

    var modal = $(this);
    modal.find('#modalSubmit').data('request', rIdx);
    modal.find('.modal-title').html('Additional Comment to Security Code. ' + rIdx + ' ?');
  });

  //Modal Amend Submit
  $('#modalAmendAction').find('#modalSubmit').click(function(event) {
    event.preventDefault();
    var target = $(event.target); // Button that triggered the modal
    var request = target.data('request');
    var positionVal = $('#modalAmendAction').find('#recipient-position').val();

    table.cell({
      row: request,
      column: 1
    }).data(positionVal).draw();
  });
});