JSFiddle - React, Tailwind, and code Playground

by Asim Shariff

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color:black;">


<table style="width: 100%;">
                    <tr style=" color: white;">
                        <th class="col-md-4 text-center" style="padding: 10px;">No. of Rooms :  <span class="multiplication_3"></span></th>
                        <th class="col-md-4 text-center" style="padding: 10px;">Adult's : <span class="addition-1"></span> </th>
                        <th class="col-md-4 text-center" style="padding: 10px;">Extra :  <span class="addition-2"></span></th>
                    </tr>
                </table>                        

                <table id="dataTable" style="width: 100%;">
                    <tr>
                        <td >
                            <select name="links" class="form-control person-3" action="post" id="myselect" >
                                <option value="0" selected="selected">--select--</option>
                                <option value="1">1</option>
                            </select>
                        </td>
                        <td >
                            <select name="keywords" class="form-control person-1" action="post" id="myselect" >
                                <option value="0" selected="selected">--select--</option>
                                <option value="5000">1</option>
                                <option value="8000">2</option>
                            </select>
                        </td>
                        <td >
                            <select name="violationtype" class="form-control person-2" action="post" id="myselect" >
                                <option value="0" selected="selected">No Beds</option>
                                <option value="4000">Adult</option>
                                <option value="3000">Child below 12</option>
                                <option value="2000">Child below...

JavaScript

var add_1 =0;
    var add_2 = 0; 
    var mul_3 = 0;
function addRow(tableID) {
debugger;
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;

    for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
        $( ".person-1" ).on( "change", function() { displayValues(); }); 
         $( ".person-2" ).on( "change", function() { displayValues(); }); 
          $( ".person-3" ).on( "change", function() { displayValues(); }); 
}
    function displayValues() {
   
      add_1 =0;
      $(".person-1").each(function(){
        add_1 += +parseInt($(this).val());
    });
     
      add_2 = 0;
      $(".person-2").each(function(){
        add_2 += +parseInt($(this).val());
    });
      mul_3 = 0;
      $(".person-3").each(function(){
        mul_3 = parseInt($(this).val());
    });

      $(".addition-1").text(add_1);
      $(".addition-2").text(add_2);
      $(".multiplication_3").text(mul_3);

      $(".addition").text( mul_3 *( add_1 + add_2) );


    }

    $(document).ready(function(){
        $(".person-1").change(displayValues); 
        $(".person-2").change(displayValues);
        $(".person-3").change(displayValues);
          $("#AddRoom").click(function() {
          addRow('dataTable');
          }); 
    });