title: Calculate total amount from different dropdowns selected value
body: <p>I am trying to calculate the total value of the selected value. In one row I have three options one is to select room that is one only, second is to select any one option and the same with the third column. When I am selecting options, it shows the correct "total Amount". Also on clicking on add room one new row with same options appears and there is no limit to add rows. But now what I am trying to do is When someone select values from different rows, "Total Amount" must show the total selected values. </p>
  
  <p>Suppose, I have selected 1 room, 1st value is 5000 and 2nd value is 4000, then "Total Amount" is showing 9000. When I added one more row, in this again I selected 1 room, the 1st value is 6000 and the 2nd value is 9000. Now the " Total Amount" will show 24000 and this will work continuously on adding rows and selecting values.</p>
  
  <p>Here is my HTML :</p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
      &lt;tr style=" color: white;"&gt;
          &lt;th class="col-md-4 text-center" style="padding: 10px;"&gt;No. of Rooms : &lt;/th&gt;
          &lt;th class="col-md-4 text-center" style="padding: 10px;"&gt;Adult's : &lt;/th&gt;
          &lt;th class="col-md-4 text-center" style="padding: 10px;"&gt;Extra : &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;                        
  
  &lt;table id="dataTable" style="width: 100%;"&gt;
      &lt;tr&gt;
          &lt;td &gt;
              &lt;select name="links" class="form-control person-3" action="post" id="myselect" onChange="document.getElementById('rooms').innerHTML = this.value;"&gt;
                  &lt;option value="0" selected="selected"&gt;--select--&lt;/option&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td &gt;
              &lt;select name="keywords" class="form-control person-1" action="post" id="myselect" onChange="document.getElementById('adults').innerHTML = this.value;"&gt;
                  &lt;option value="0" selected="selected"&gt;--select--&lt;/option&gt;
                  &lt;option value="5000"&gt;1&lt;/option&gt;
                  &lt;option value="8000"&gt;2&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td &gt;
              &lt;select name="violationtype" class="form-control person-2" action="post" id="myselect" onChange="document.getElementById('extra').innerHTML = this.value;"&gt;
                  &lt;option value="0" selected="selected"&gt;No Beds&lt;/option&gt;
                  &lt;option value="4000"&gt;Adult&lt;/option&gt;
                  &lt;option value="3000"&gt;Child below 12&lt;/option&gt;
                  &lt;option value="2000"&gt;Child below 7&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  &lt;/table&gt; 
  
  &lt;input type="button" value="Add Rooms" onclick="addRow('dataTable')" class="btn btn-primary" style="margin-top: 15px;" /&gt;&lt;br&gt;&lt;br&gt;
  
  
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-6" style="color: white;font-size: 20px;text-align: right;"&gt;Total Amount :&lt;/div&gt;
          &lt;div class="col-md-6" style="color: white;font-size: 20px;text-align: left;"&gt; 
              &lt;span class="addition"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;br&gt;
  </code></pre>
  
  <p>Here is my script through which I am calculating the total amount:</p>
  
  <pre><code>var add_1 =0;
  var add_2 = 0; 
  var mul_3 = 0;
  
  function displayValues() {
    add_1 = parseInt($('.person-1').val());
    add_2 = parseInt($('.person-2').val());
    mul_3 = parseInt($('.person-3').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);
  });
  </code></pre>
  
  <p>Here is the code to add rooms:</p>
  
  <pre class="lang-js prettyprint-override"><code>function addRow(tableID) {
  
    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 &lt; 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;
      }
    }
  }
  </code></pre>