Change one or more value of plots, and automatically recalculate the other fields

Question

I changed the way I wanted, but now I’m having problems with actual formatting!

Example link

Follow the changed code

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<center>
<table>
  <tr>
    <th>Parcela</th>
    <th>valor</th>
   
  </tr>
<?php
$total = "20000";
$total_parcelas = 5;
$i = 1;
while ($i <= $total_parcelas):     
$parcelas = $total / $total_parcelas;        
    
    ?>

 <tr>
    <td>Parcela <?php echo $i;?></td>
    <td> <input type="valor" id="<?php echo $i;?>" name="valor"  class="geral_parc val_parcela parcela_variavel" value="<?php echo $parcelas;?>"> </td>
</tr>



<?php    $i++;
endwhile;
?>

  </table>
    Total: <label class="show-total"></label>
</center>


<script>
    
        const round = (num, places) => {
            if (!("" + num).includes("e")) {
                    return +(Math.round(num + "e+" + places)  + "e-" + places);
            } else {
                    let arr = ("" + num).split("e");
                    let sig = ""
                    if (+arr[1] + places > 0) {
                            sig = "+";
                    }

                    return +(Math.round(+arr[0] + "e" + sig + (+arr[1] + places)) + "e-" + places);
            }
        } 
    
    
    $(function(){
        'use strict';
         
            
            $(".parcela_variavel").keyup(function(){
                var total_fix = 0;
                var total_var = 0;
                var total_geral = 0;
                var total_fixas = $('.parcela_fixa').length;
                var id = $(this).attr('id');
                var valor =  $('#'+id).val();
                $('#'+id).removeClass('val_parcela');
                $('#'+id).addClass('parcela_fixa');
                $('#'+id).removeClass('parcela_variavel');
              
               
                $(".parcela_variavel").each(function(index,element){
                   if ($(element).val()) {
                     total_fix+= parseInt($(element).val());    
                   }
               });
               
               $(".parcela_fixa").each(function(index,element){
                   if ($(element).val()) {
                     total_var+= parseInt($(element).val());    
                   }
               });
               
                $(".geral_parc").each(function(index,element){
                   if ($(element).val()) {
                     total_geral+= parseInt($(element).val());    
                   }
               });
               
               
              var restante =<?php echo $total;?> - total_var; 
               
               
               var n_parcelas_flutuantes = <?php echo $total_parcelas;?> - total_fixas;
               
               var parcelas_flutuantes = restante / n_parcelas_flutuantes
                $(".val_parcela").val(parcelas_flutuantes);
               
             
               $(".show-total").text(total_fix + ' - ' + total_var +  ' - '+ total_geral + ' - ' + restante);
            });
              
              
              
        
        
        
     });
        
</script>

I am creating a system that is necessary to divide a certain value into x installments, so far so good, the problem is that the customer can change the value of one or more installments, and with that the system needs to calculate the remaining installments and divide by the installments that have not been changed

The division and alteration of a plot I managed to create in a very rustic way.

what is killing me and the question of being able to change this value in more installments, I thought to put a Checkbox to mark as fixed, but I’m not able to think about how to do this process.