<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>PO</title>
  <link href="style.css" rel="stylesheet">

</head>

<body>
  <header>
    
  </header>
  <section id="I">

    <table id='PO1' class="purchaseOrder">
      <thead>
        <tr>
          <th class='name'>Name</th>
          <th class='age'>Age</th>
          <th class='address'>Address</th>
          <th class='pay'>Pay</th>
          <th>Cart</th>
        </tr>
      </thead>
      <tbody>
        <tr id='C1' class='customer'>
          <td>Jon Doe</td>
          <td>30</td>
          <td>Earth</td>
          <td>Credit</td>
          <td>
            <table class='cart'>
              <thead>
                <tr>
                  <th>&nbsp;</th>
                  <th class='brand'>Brand</th>
                  <th class='qty'>Qty</th>
                  <th class='size'>Size</th>
                  <th class='color'>Color</th>
                </tr>
              </thead>
              <tbody>
                <tr id='item1' class='item'>
                  <td>
                    <input class="chx" name="chx" type="checkbox">
                  </td>
                  <td>New Item</td>
                  <td></td>
                  <td></td>
                  <td>
                    <select name='color'>
                      <option value='black'>Black</option>
                      <option value='white'>White</option>
                    </select>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td>
                    <button class="remItem" onclick='remItem(this)'>-</button>
                  </td>
                  <td colspan='3'></td>
                  <td>
                    <button class="addItem" onclick='addItem("itemTemplate", this)'>+</button>
                  </td>
                </tr>
              </tfoot>
            </table>


          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan='3'></td>
          <td>
            <button class="addCustomer">Add Customer</button>
          </td>
        </tr>
      </tfoot>
    </table>


  </section>
  <footer>
    <template id="cartTemplate">

      <table class='cart'>
        <thead>
          <tr>
            <th>&nbsp;</th>
            <th class='brand'>Brand</th>
            <th class='qty'>Qty</th>
            <th class='size'>Size</th>
            <th class='color'>Color</th>
          </tr>
        </thead>
        <tbody>
          <tr class='item'>
            <td>
              <input class="chx" name="chx" type="checkbox">
            </td>
            <td>New Item</td>
            <td></td>
            <td></td>
            <td>
              <select name='color'>
                <option value='black'>Black</option>
                <option value='white'>White</option>
              </select>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>
              <button class="remItem" onclick='remItem(this)'>-</button>
            </td>
            <td colspan='3'></td>
            <td>
              <button class="addItem" onclick='addItem("itemTemplate",this)'>+</button>
            </td>
          </tr>
        </tfoot>
      </table>

    </template>
    <template id='itemTemplate'>

      <tr class="item">
        <td>
          <input class="chx" name="chx" type="checkbox">
        </td>
        <td>New Item</td>
        <td></td>
        <td></td>
        <td>
          <select name="color">
            <option value="black">Black</option>
            <option value="white">White</option>
          </select>
        </td>
      </tr>

    </template>

  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script>
    $(".addCustomer").on('click', function(e) {
      var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
      var newCart = newClone('cartTemplate');
      $('.customer:last').append(newCart);
      e.preventDefault();

    });

    function newClone(id) {
      var template = document.getElementById(id);
      var clone = document.importNode(template.content, true);
      return clone;
    }

    function addItem(id, origin) {
      var newItem = newClone(id);
      $(origin).closest('table').append(newItem);
    }

    function toggle(origin) {
      var chxList = $(origin).closest('table').find('.chx:checked');
      chkList.click(function() {
        chkList.prop('checked', origin.checked)
      })
    }

    function remItem(origin) {
      var chxList = $(origin).closest('table').find('.chx:checked');
      chxList.each(function(idx, obj) {
        obj.closest('.item').remove();
      });
    }
  </script>
</body>


</html>
table {
  table-layout: fixed;
}

table,
td,
th {
  border: 1px solid black;
}

.name,
.brand,
.color {
  width: 10%;
}

.age,
.address,
.pay,
.qty,
.size {
  width: 5%;
}

.cart th:first-of-type {
  width: 2.5%;
}