Array of checkbox in javascript as well as controller hide section show section and manage it

Guys iam working with school project. i have a module fee section.

i have a problem with it, when admin chooses the class and section and student name the fees which are in fees table must be retrieved and displayed in the screen.

i have table feemaincategory and feesubcategory

feemaincategory table consist of columns and data like below

id      name        amt
1       term1       8000
2       term2       5000

feesubcategory table consist of columns and data like below

id  maincategory_id     name        amt

1       1               vanfee      4000
2       1               tutionfee   4000
3       2               uniformfee  2500
4       2               extrafee        2500

say for example,

when admin choose student name AbdulBazith then it must giive output like below screen shot

Refer: https://imgur.com/ID3Uk37

AbdulBaazith    AdminNo:001     class:V std


(checkboxname:fee_yes_no[])Term1

<section name=???>

                                vanfee      4000
                                tutionfee   4000    
                                total       8000 (textbox name: total_amt[])

</section>

(checkboxname:fee_yes_no[])Term1Term2

<section name=???>

                                informfee   2500
                                extrafee        2500    
                                total       5000  (textbox name: total_amt[])

</section>

Fine amt : 100 (textbox name:fine_amt)  discount:100 (textbox name: disc_amt)   

                                TotalFeeAmt: 13000 (total of total_fee_amt[] )

i think the above calculation you guys understood clearly. a parent can pay both the termfee or any one term fee. in foreach the maincategory and subcategory are displayed.

whats my doubt is if a parent likes to pay only Term1 fee then he will uncheck the term2 fee. when he unchecks the term2 fee then that section should be hided and its total_amt[] must be less from total_fee_amt.

So a parent can uncheck any of the termfee, so that that section must be hided and its total amount must not take to overall total.

my problem is checkbox, section, total_amt for these three how should i name it. i think by array format only but how?

i did like this two format checkbox name="fee_yes_no" or name="fee_yes_no[{{feemain->id}}]" like this?? which is correct and how to do that.

the calculation which i done is given below

<script>

  var disc_amt = +document.getElementById('disc_amt').value || "0";

  var fine_amt = +document.getElementById('fine_amt').value || "0";

 var total_amt= document.getElementsByName('tot_amt[]');

                        var total_fee_amt= document.getElementById('total_fee_amt');
                        total_fee_amt.value = 0;

                        var amt=0;

this for loop is used to add the total of each term that is ```total_amt[]```

  for (var i = 0; i < total_amt.length; i++) {

                            amt= amt+ parseFloat(total_amt[i].value) ;

                                }

then what iam doing is  need to add the fine amount and subtract the discount amount. that process done below

total_fee_amt.value = amt+ parseFloat(fine_amt) - parseFloat(disc_amt);

</script>

Everything is fine. Working good calculation etc are works correct.

But my issue is when i uncheck the checkbox that section should hide and that total_amt should be not taken for calculation. ho to do that???

I have given my form design below

this below code is  checkbox and displaying of term1 term2 so on

 <input name="fee_yes_no[{{ $fee->id }}]" id="fee_yes_no" type="checkbox" value="need_fee" onclick="testt();" checked>

<span class="cr cr-new"><i class="cr-icon icofont icofont-verification-check txt-primary"></i></span>
{{ $fee->fee_main_cat }} </label>


the below code is for display the sub categories with total_amt[]

 <section class="row col-md-12" id="fee_cons" name="fee_cons[]">
     <div class="card-block">
         <div class="col-lg-12 col-xl-12">
             <div class="table-responsive">
                 <div class="checkbox-fade fade-in-primary checkbox">
                     <input id="fee_main_cat_id" name="fee_main_cat_id" type="hidden" value="{{ $fee->id }}"
                         class="form-control required" aria-required="true" readonly>
                 </div>
                 <table class="table m-0 b-tp">
                     <tbody>
                         @foreach ($fee->feesubs as
                         $feesub )
                         <tr>
                             <th>{{ $feesub->fee_sub_cat }}
                             </th>
                             <td>
                                 <input id="fee_sub" name="fee_sub" type="text" class="form-control required"
                                     aria-required="true" value="{{ $feesub->amt }}" readonly>
                             </td>
                             @php
                             $total += $feesub->amt;
                             @endphp
                             @if($loop->last)
                             <th>Total Fee</th>
                             <td>
                                 <input id="total_amt" name="total_amt[]" type="text" class="form-control required"
                                     aria-required="true" readonly value="{{ $total }}">
                             </td>
                             @endif
                         </tr>
                         @endforeach
                     </tbody>
                 </table>
             </div>
         </div>
     </div>
 </section>

the same problem is my controller also. after doing it here in controller how i can do this to save in db