Add values selected by user from dynamically created dropdown list/combobox

Hello guys, I am not really good at jquery neither javascript.
I have a button named "Add rows", which adds three dropdown list in below the existing one.
The last two are dependent on each other, eg, if I select '0-10kg' from weight list, the price dropdown changes to '1400'.

I want the sum of values selected by the user in the price dropwdown list of all rows created by the user.
This is my code.

html code here

`
    <INPUT type="button" value="Add Row" id="button" /> 
    <!-- this button generates three dropwdown lists below the first row and so on !-->
    <form id="form1" method="post" action="">
    <TABLE id="dataTable">
    <TR>
    <TD>
    <!-- checkbox added for delete option row but isn't working as of now!-->
    <INPUT type="checkbox" name="chk"/>
    </TD>
    <TD>
    <select>
    <option>Baggage</option>
    </select>
    </TD>
    <TD>
    <!-- the weight values are in the javascript code and are populated automatically --!>
    <select id="selectCategory"> 
    <option value="0">Choose weight</option>          
    </select>
    </TD>
    <TD>
    <!-- this value generates after an option from weight is selected, this too is there in the javascript code --!> 
    <select id="selectSubCategory" name="selectSubCategory" >
    <option>Choose price</option>  
    <option value="1">0</option>
    <option value="2">1400</option>
    <option value="3">1900</option>
    <option value="4">2100</option>
    <!-- added these options because needed them to calculate total --!>   
    </select>
   </TD>
   </TR>
  </TABLE>
  </form>
   Price: <u id="price"></u> <!--total amount to  be displayed here --!>

and jquery here

 $(function() {
   $('#selectCategory').change(function() {
   getSelectedItem(this, null);
   });

    /* adds row */
   $('#button').click(function() {
    addRow('dataTable');
    });

    /* this is where the values are given */
    var jsonObj = {
    "Other": ["0"],
    "0-10kg": ["1400"],
    "11-15kg": ["1900"],
    "16-20kg": ["2100"]
    };
    var keys = Object.keys(jsonObj);
    var category_dropdown = document.getElementById("selectCategory");

   var getSelectedItem = function(element, row) {
   var e = element;
   var selectedCategory = e.options[e.selectedIndex].value;
   var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[2] : document.getElementById("selectSubCategory"));
   sub_category_dropdown.options.length = 0;
   for (var i = 0; i < jsonObj[selectedCategory].length; i++) {
   sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i], jsonObj[selectedCategory][i]);
      }
    };

   var addRow = function(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 < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    newcell.childNodes[0].selectedIndex = 0;
    }
    var selects = row.getElementsByTagName("select");
    selects[1].addEventListener('change', function() {
    getSelectedItem(this, row)
    }, false);
    };

    for (var keys in jsonObj) {
    category_dropdown[category_dropdown.length] = new Option(keys, keys);
    }
    });

     /* a code to store the values selected by the user and show it's total */
     $(function () 
    {
    var fields = $('#form1 :input').change(calculate)
    $("#form1 option").text(function(i,t)
    {
     if (this.value!=="0")     
     return t + " - " + this.value
     })

    function calculate() {
     var price = 0;
     fields.each(function ()    {   
      //add only if the value is number
      if (!isNaN(this.value) && this.value.length != 0) {
      price += +$(this).val(); //only shows the selected value in the first row, last dropdown list 
      }       
      })
       $('#price').html(price.toFixed(2)); //decimal rounded till 2 numbers
    }
    }); 

    /*using console to show selected values of all rows in the last dropwdown list but not working */
    $('body').on('change', "#selectSubCategory", function(e){
     console.log($(this).val());
    });`