JSFiddle - React, Tailwind, and code Playground

by Eric L

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/rowreorder/1.1.1/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.1.1/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<form>
  <table>
    <tr>
      <td><a href="#" text="600whatwhat" data-toggle="modal" data-target="#splitLoad">Click me for modal</a></td>
    </tr>
  </table>
</form>
<div class="modal" id="splitLoad" tabindex="-1" role="dialog" aria-labelledby="splitLoadLabel" aria-hidden="true">
  <form id="test1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="splitLoadLabel">Split Load</h4>
      </div>
      <div class="modal-body row">
        <div class="table-responsive col-md-4">
          <table class="table table-striped table-bordered table-responsive table-condensed" id="splitShipment" border='1'>
            <thead>
              <tr>
                <td>Store</td>
                <td>State</td>
                <td>% Available</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td...

JavaScript

function beginsData(text) {
      return text.startsWith("No data");
    }    

    var table2 = $('#splitShipment').DataTable({
      fixedHeader: true,
      responsive: true,
      paging: false,
      info: false,
      searching: false
    });
    var table = $('#splitList').DataTable({
      fixedHeader: true,
      responsive: true,
      paging: false,
      info: false,
      searching: false,      
      rowReorder: {
        selector: 'td:last-child'
      },      
      columnDefs: [{
        orderable: true,
        targets: 0
      }, {
        orderable: true,
        className: 'reorder',
        targets: '_all'
      }],
      order: [
        [4, 'asc']
      ]
    });
    var row;
    var lastStop;
    var data;
    $('#splitLoad').on('show.bs.modal', function () {
      $(this).find('.modal-dialog').css({
        width:'70%', 
        height:'auto', 
        'max-height':'90%',
        'max-width':'80%'
      });
    });    
    $('#splitShipment tbody').on( 'click', 'tr', function () {    
      if (beginsData($(this).text()) != true){
        $(this).addClass('selected').siblings().removeClass('selected');  
        $('#splitList tbody tr').removeClass('selected');
      }
    });
    $('#splitList tbody').on( 'click', 'tr', function () {  
      if (beginsData($(this).text()) != true){
        $(this).addClass('selected').siblings().removeClass('selected');    
        $('#splitShipment tbody tr').removeClass('selected');
      }
    }); 
    $('#right').click( function () {
      row = $('.selected').closest("tr");
      data=[];
      if($("#splitShipment .selected").length > 0) {
        lastStop = parseInt($('#splitList tr:last td:last-child').text()) + 1 ; 
        if (isNaN(lastStop)) { lastStop = 1 };
        data=[];
        $(row).find('td').each(function() {
          data.push($(this).text());          
        });
        data.push('<input type="text" class="form-control" name="percentage[]" />');
        data.push(lastStop);   ...