JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Master Details Entry</h2>

<div class="container" style="max-width:600px">
    <div class="master">
         <h4>Order Details</h4>

    </div>
    <table>
        <tr>
            <td>Order No</td>
            <td>
                <input type="text" id="orderNo" /> <span class="error">Order No Required</span>

            </td>
            <td>Order Date</td>
            <td>
                <input type="text" id="orderDate" /> <span class="error">Order Valid OrderDate Required(Ex: MM-DD-YY)</span>

            </td>
        </tr>
        <tr>
            <td>Description</td>
            <td colspan="3">
                <textarea id="description" style="width:100%"></textarea>
            </td>
        </tr>
    </table>
    <div class="Details">
         <h4>Order Items</h4>

        <table width="100%">
            <tr>
                <td>ItemName</td>
                <td>Quantity</td>
                <td>Rate</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="itemName" /> <span class="error">ItemName Required</span>

                </td>
                <td>
                    <input type="text" id="quantity" /> <span class="error ">Valid quantity required</span>

                </td>
                <td>
                    <input type="text" id="rate" /> <span class="error">Valid Rate Required</span>

                </td>
                <td>
                    <input type="button" id="add" value="add" />
                </td>
            </tr>
        </table>
        <div id="OrderItems" class="tablecontainer"></div>
        <div style="padding:10px 0px" ;text-align="right">
            <input type="submit" type="button" value="save" style="padding:10px 20px" />
        </div>
    </div>
</div>

CSS

/* Adding some Css For good Looks*/
  span.error {
      display:block;
      visibility:hidden;
      color:red;
      font-size:90%;
  }
  /* Css For Table*/
  .container td {
      vertical-align:top;
  }
  .tablecontainer table {
      width:100%;
      border-collapse:collapse;
      border-top:1px solid red;
      border-right:1px solid red;
  }
  .tablecontainer th {
      border-bottom:2px solid red ! important;
  }
  .tablecontainer th, .tablecontainer td {
      text-align:left;
      border-left:1px solid red;
      padding : 5px;
      border-bottom: 1px solid red;
  }
  .ui.widget {
      font-size: 12px !important;
  }

JavaScript

$(document).ready(function () {
      var itm = [];
      // Add Button Click Function
      $('#add').click(function () {

          var i = 0;
          if ($('#itemName').val() == '') {
              $('#itemName').siblings('span.error').css('visibility', 'visible');
          } else {
              $('#itemName').siblings('span.error').css('visibility', 'hidden');
              i++;
          }

          if ($('#quantity').val() == '' || isNaN($('#quantity').val())) {
              $('#quantity').siblings('span.error').css('visibility', 'visible');

          } else {
              $('#quantity').siblings('span.error').css('visibility', 'hidden');
              i++;
          }

          if ($('#rate').val() == '' || isNaN($('#rate').val())) {
              $('#rate').siblings('span.error').css('visibility', 'visible');
          } else {
              $('#rate').siblings('span.error').css('visibility', 'hidden');
              i++;
          }
          if (i == 3) {
              itm.push({
                  ItemName: $('#itemName').val(),
                  Quantity: parseInt($('#quantity').val()),
                  Rate: parseFloat($('#rate').val()),
                  Total: parseInt($('#quantity').val()) * parseFloat($('#rate').val())
              });
              $('#itemName').val('').focus();
              $('#quantity').val('');
              $('#rate').val('');

          }
          GenratedItemTable(itm);
      });
      $('input[value="save"]').click(function () {
          $.ajax({

              url: ' /Home/SaveOrder/',
              type: "POST",
              data: JSON.stringify(itm),
              datatype: "JSON",
              ContentType: "application/json",
              success: function (d) {
                  //check is successfully save to database 
                  if (d.status == true) {
                      alert('SuccessFully Done');
                      // Clear Form
                      orderItems = [];
               ...