JSFiddle - React, Tailwind, and code Playground

by Thomas Pitera

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#shiptous">Ship To Us</a></li>
    <li><a data-toggle="tab" href="#youritems">Your Items</a></li>
    <li><a data-toggle="tab" href="#ourproducts">Our Products</a></li>
    <li><a data-toggle="tab" href="#cart">Cart</a></li>
  </ul>

  <div class="tab-content">
    <div id="shiptous" class="tab-pane fade in active">
      <h3>Ship To Us</h3>
      <div id="content">

  <h1>Ship To Us form</h1>
<button type="button" id="btnAdd"  onclick="Add()">Add New Item</button> 
  <table class="table" id="diagnosis_list")>
    <thead>
      <tr>
        <th>Item Number</th>
        <th>Item Name</th>
        <th>Item Description</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="priority">1</td>
        <td><input type="text" name="item_name" /></td>
        <td><input type="text" name="item_description"/></td>
        <td><button type="button" class="btn btn-danger btnDelete" id="btnDelete"   
        onclick="Delete()">Delete</button></td>
      </tr>
      <tr>
        <td class='priority'>2</td> 
        <td><input type='text' name='item_name' /></td> 
        <td><input type='text' name='item_description'/></td> 
        <td><button type='button' class='btn btn-danger btnDelete'id='btnDelete'
       onclick="Delete()">Delete</button></td>
      </tr> 
    </tbody>
  </table>
  <button type="button" class="btn btn-danger btnSubmit" id="btnSubmit" onclick="Submit()">Submit</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal...

CSS

ui-sortable tr {
  cursor: pointer;
}

.ui-sortable tr:hover {
  background: rgba(244, 251, 17, 0.45);
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: red;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
.productbox {
  border:1px solid #333; 
  background-color:#f1f1f1; 
  border-radius:5px; 
  padding:16px; 
  height:350px;
}
.hide {
  display: none;
}
.productbox2 {
  border:1px solid #333; 
  background-color: #ffffff; 
  border-radius:5px; 
  padding:16px; 
  height:350px;
}

JavaScript

jQuery( document ).ready( function($) {
  //Helper function to keep table row from collapsing when being sorted
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
  };

  //Make diagnosis table sortable
  $("#diagnosis_list tbody").sortable({
    helper: fixHelperModified,
    stop: function(event, ui) {
      renumber_table('#diagnosis_list')
    }
  }).disableSelection();

//Renumber table rows
function renumber_table() {
  var rows = $("#diagnosis_list tbody tr");
    rows.each(function (i) {
        var inputs = $(this).find('input');
        i++;
        inputs.eq(0).attr('id', 'item_number'+i )
        inputs.eq(0).attr('name', 'item_number'+i)
        inputs.eq(0).attr('value', ''+i)
        inputs.eq(1).attr('id', 'item_name'+i )
        inputs.eq(1).attr('name', 'item_name'+i )
        inputs.eq(2).attr('id', 'item_description'+i )
        inputs.eq(2).attr('name', 'item_description'+i )
    });
   };

function Add(){ 
var x = document.getElementById("diagnosis_list").rows.length;
$("#diagnosis_list tbody").append( 
"<tr>"+ "<td class='priority'><input type='text' name='item_number' value='"+ x +"'/></td>"+ 
"<td><input type='text' name='item_name' /></td>"+ 
"<td><input type='text' name='item_description'/></td>"+ 
"<td><button type='button' class='btn btn-danger btnDelete'id='btnDelete'>Delete</button>"+ "</tr>"); 
document.getElementById('rowcount').value = x;
$(".btnDelete").bind("click", Delete); 
renumber_table();
}; 

function Delete(){ 
var par = $(this).parent().parent(); //tr 
par.remove(); 
renumber_table();
}; 
$("#btnAdd").bind("click", Add);	
  $("#btnDelete").bind("click", Delete); 
//on mouseover, alert that rows can be moved via drag and drop
$('#diagnosis_list').one('mouseover', function() {
// Get the modal
var modal =...