javascript - Jquery subtotal function conflicting with js gst function -

o.k today starting 1 step forward , 2 steps back. have jquery function price x qty = subtotal in form , each subtotal calculated total, fine , dandy. have plain js function took total value , added gst , further subtotal figure created on it's own , works @ point when tried move on gst , finial total functions won't work , can't error codes out of either. @ point can assume js script can't talk jquery script or wrong.

// jquery script <script type="text/javascript">     jquery(function($) {       $(".qty, .tradeprice").change(function() {         var total = 0;         $(".qty").each(function() {             var $qty = $(this),                 $row = $qty.closest('tr'),                 $tradeprice = $row.find('.tradeprice'),                 $subtotal = $row.find('.subtotal');             subtotal = parseint($qty.val(), 10) * parsefloat($tradeprice.val());             total += subtotal;             $subtotal.val(subtotal);         });         $('.total').val(total);     }).change();     }); </script>   // js script <script type="text/javascript">     function updateprice() {           // ex-gst price form element     var exprice = document.getelementbyid("ex-gst").value;     var gstprice = document.getelementbyid("gst").value;      // gst price     gstprice = exprice * 0.1;     var tprice = parseint(gstprice) + parseint(exprice);      // set gst price in form element     document.getelementbyid("gst").value = gstprice;     document.getelementbyid("inc-gst").value = tprice;      } </script>  // bottom of html <form>     <table>         <tr>             <th><input type='text' name='po101' id='po101'/></th>             <td><input name='po102' type='text' id="po102"/></td>             <td><input name='po103' type='text' id="po103" /></td>             <td>$<input name='po104' type="text" class='tradeprice' id="po104" value="0" /></td>             <th><input name='po105' type="text" class='qty' id="po105" value="0" /></th>             <td><input name='po106' type='text' class='subtotal' id="po106" readonly="true" /></td>         </tr>         <tr>             <th height='24' colspan="7">total:<input type='text' id='total' name='total' class='total' readonly="true" onchange="updateprice()"/></th>         </tr>         <tr>             <th height='24' colspan="7"><div id='submit'><input type='submit' /></div></th>         </tr>         <tr>             <th height='24' colspan="7">             <input type='text' id="gst" name='gst' onchange="updateprice()" />             <input type='text' id="inc-gst" name='inc-gst' onchange="updateprice(this.form)"/>             </th>         </tr>     </table> </form> 

i have edited code, , changed line

var exprice = document.getelementbyid("ex-gst").value; 

to

var exprice = document.getelementbyid("total").value; 

i have updated code removing onchange() html , added trigger updateprice() function change event.

and result (i have added jquery version comments, both work).

jquery(function($) {        $(".qty, .tradeprice").change(function() {          var total = 0;          $(".qty").each(function() {            var $qty = $(this),              $row = $qty.closest('tr'),              $tradeprice = $row.find('.tradeprice'),              $subtotal = $row.find('.subtotal');            subtotal = parseint($qty.val(), 10) * parsefloat($tradeprice.val());            total += subtotal;            $subtotal.val(subtotal);          });          $('.total').val(total);          updateprice();        }).change();      });        function updateprice() {        // ex-gst price form element        var exprice = document.getelementbyid("total").value;        //var exprice = $('#total').val() //this jquery        var gstprice = document.getelementbyid("gst").value;        //var exprice = $('#gst').val() //this jquery          // gst price        gstprice = exprice * 0.1;        var tprice = parseint(gstprice) + parseint(exprice);          // set gst price in form element        document.getelementbyid("gst").value = gstprice;        //$('#gst').val(gstprice) //this jquery        document.getelementbyid("inc-gst").value = tprice;        //$('#inc-gst').val(tprice) //this jquery        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <form>    <table>      <tr>        <th>          <input type='text' name='po101' id='po101' />        </th>        <td>          <input name='po102' type='text' id="po102" />        </td>        <td>          <input name='po103' type='text' id="po103" />        </td>        <td>$          <input name='po104' type="text" class='tradeprice' id="po104" value="0" />        </td>        <th>          <input name='po105' type="text" class='qty' id="po105" value="0" />        </th>        <td>          <input name='po106' type='text' class='subtotal' id="po106" readonly="true" />        </td>      </tr>      <tr>        <th height='24' colspan="7">total:          <input type='text' id='total' name='total' class='total' readonly="true" />        </th>      </tr>      <tr>        <th height='24' colspan="7">          <div id='submit'>            <input type='submit' />          </div>        </th>      </tr>      <tr>        <th height='24' colspan="7">          <input type='text' id="gst" name='gst' />          <input type='text' id="inc-gst" name='inc-gst' />        </th>      </tr>    </table>  </form>