JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id='myApp'>
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th>
        Name
      </th>
      <th>
        Country
      </th>
      <th>
        Orders
      </th>
      <th>
        &nbsp;
      </th>
    </tr>
    <tbody id='tableBody'></tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" id='txtName' />
        </td>
        <td>
          <input type="text" id='txtCountry' />
        </td>
        <td>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-index="-1" data-target="#popup">
            Add Orders</button>
        </td>
        <td>
          <input type="button" id="btnAdd" class="btn btn-primary" value="Add" />
        </td>
      </tr>
    </tfoot>
  </table>

  <div class="modal fade" id="popup" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            Ă—</button>
          <h4 class="modal-title">
            Modal Header</h4>
        </div>
        <div class="modal-body">
          <div class="s2vk-container">
            <div class="row">
              <div class="col-md-8">
                <div class="panel panel-default">
                  <table class="table table-condensed">
                    <thead>
                      <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                        <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                          OrderId
                        </th>
                        <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
               ...

JavaScript

class Customer {
  constructor(name, country, orders) {
    this.Name = name;
    this.Country = country;
    this.Orders = orders;
  }

  addOrder(id, frieght, shiptCountry) {
    var order = {};
    order.OrderId = id;
    order.Freight = frieght;
    order.ShipCountry = shiptCountry;

    this.Orders.push(order);
  }

  removeOrder(index) {
    var name = this.Orders[index].OrderId;
    if (confirm("Do you want to delete: " + name)) {
      this.Orders.splice(index, 1);
    }
  }
}

var c = new Customer('John Hammond', 'United States', [{
    OrderId: 10248,
    Freight: 32.38,
    ShipCountry: 'France'
  },
  {
    OrderId: 10249,
    Freight: 12.43,
    ShipCountry: 'Japan'
  },
  {
    OrderId: 10250,
    Freight: 66.43,
    ShipCountry: 'Russia'
  }
]);

var cart = {
  customers: new Array(c),
  add: function(name, country, orders) {
    var customer = new Customer(name, country, orders);
    this.customers.push(customer);
  },
  remove: function(index) {
    var name = this.customers[index].Name;
    if (confirm("Do you want to delete: " + name)) {
      this.customers.splice(index, 1);
    }
  }
};

function updateContent() {
  $('#tableBody').html('');

  cart.customers.forEach(function(element, index) {


    $('#tableBody').append('<tr></tr>');
    $('#tableBody tr:last').append('<td><input type="text" value="' + element.Name + '" /></td>');
    $('#tableBody tr:last').append('<td><input type="text" value="' + element.Country + '" /></td>');
    $('#tableBody tr:last').append('<td><button type="button" class="btn btn-primary" data-index="' + index + '" data-toggle="modal" data-target="#popup">View Orders</button></td>');
    $('#tableBody tr:last').append('<input type="button" data-index="' + index + '" value="Remove" class="btn btn-danger btnRemoveCust" />');
  });

  $('.btnRemoveCust').click(function() {
    var index = $(this).data('index');
    cart.remove(index);
    updateContent();
  });

};

updateContent();
var currentOrders =...