What is different between inside table and outside table html tag when using javascript to calculate some value?

How to access Class in table element to calculate its value

NOTES: If I don't put input element into table->tbody->tr->td It will work with javascript below And If I put input element into table it will work for me (if I don't used table).

So What is wrong when I put input element into tbody inside of table tag?

Here is HML tag

<?php echo form_open(base_url('invoice/add'));?>
<table class="table table-condensed">
 <thead>
     <tr>
         <td><strong>No</strong></td>
         <td><strong>DESCRIPTION</strong></td>
         <td><strong>Type</strong></td>
         <td><strong>QUANTITY</strong></td>
         <td><strong>UNIT PRICE</strong></td>
         <td><strong>AMOUNT (USD)</strong></td>
     </tr>
 </thead> 
 <tbody>
     <tr>
         <td width="30px">1</td>
         <td width="auto"><?php echo form_textarea('descr',set_value('descr',''),'class="descriptoin my-form-control"')?></td>
         <td><?php echo form_dropdown('type',$type,'',' class="type form-control" placeholder="type"')?></td>
         <td><?php echo form_input('quant',set_value('quant',' '),'class="qty"')?></td>
         <td><?php echo form_input('unit_p',set_value('unit_p',' '),'class="unit"')?></td>
         <td><?php echo form_input('amount',set_value('amount',' '),'class="amount" readonly')?>$</td>
     </tr> 
     <tr>
         <td></td>
         <td><?php echo form_textarea('descr',set_value('descr1',''),'class="descriptoin my-form-control"')?></td>
         <td></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
     </tr>
     <tr>
         <td></td>
         <td><?php echo form_textarea('descr',set_value('descr2',''),'class="descriptoin my-form-control"')?></td>
         <td></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
     </tr>
     <tr>
         <td></td>
         <td><?php echo form_textarea('descr',set_value('descr3',''),'class="descriptoin my-form-control"')?></td>
         <td></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
    </tr>
    <tr>
         <td></td>
         <td><?php echo form_textarea('descr',set_value('descr4',''),'class="descriptoin my-form-control"')?></td>
         <td></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
     </tr>
     <tr>
         <td></td>
         <td><?php echo form_textarea('descr',set_value('descr5',''),'class="descriptoin my-form-control"')?></td>
         <td></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
         <td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
     </tr> 
     <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>Total</td>
         <td><?php echo form_input('total',set_value('total',''),'class="result" readonly ')?>$</td>
     </tr></tbody>

 </table>
<?php echo form_close();?>

And Here is My Javascript to calculate all quant and unit and amount of unit*quant and I used variable to sum all amount as Result = amount+amount(n)

But it doesn't work when I used input element into tbody inside of table like above.

<script type="text/javascript">

$(function () {
    $('.unit,.qty').on('change', function () {
    var unit = $(this).hasClass('unit') ? $(this).val() : $(this).siblings('.unit').val();
    var qty = $(this).hasClass('qty') ? $(this).val() : $(this).siblings('.qty').val();
    unit = unit || 0;
    qty = qty || 0;
    var val = unit >= 1 && qty >= 1 ? parseFloat(unit * qty) : 0;
    $(this).siblings('.amount').val(val);
    var total = 0;
    var update = false;
    $('.amount').each(function () {
        val = parseFloat($(this).val()) | 0;
        total = val ? (parseFloat(total + val)) : total;
    });
    $('.result').val(total);
  });
});

</script> 

Sorry It might too bad because much for html code But I have to do with this code

Please help.