what js code that will get the value from the div class name from the append. () to get the value-CodePudding

I am creating a like a data calculator that will compute the inputted number.

My problem is that when adding new input, it cannot get or add the value to the total.

this are the sample out.

When you click the plus( ) button and add new number value, it will not add up to the total.

jQuery($ => {
  const $expenses_debit = $(".expenses_debit");
  const $res_debit = $("#sub_debit");
  $expenses_debit.on("input", () => {

    const total = $expenses_debit.get().reduce((acc, el) => (acc  = parseFloat(el.value, 10) || 0), 0).toFixed(2);
    $res_debit.val(total);
  });
});

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap27"); //Fields wrapper
  var add_button = $(".add_field_button27"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x  ; //text box increment
      $(wrapper).append('<tr><td><div ><div ><a href="#" ><button >-</button></a></div><div ><div ><input type="text" name="" style="font-size:12px"  placeholder="Check No" id="expendable_furniture_check[]"></div></div></div></td><th>Furniture and Fixtures</th><td>12345</td><td><div ><span  style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off"  placeholder="0.00" id="expendable_furniture_debit[]"></div></td><td><div ><span  style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off"  placeholder="0.00" disabled></div></td></tr>');
    }
  });

  $(wrapper).on("click", ".remove_field27", function(e) {
    e.preventDefault();
    $(this).closest("tr").remove();
    x--;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <table  align="center" style="font-size: 9pt">
    <thead style="font-size: 11pt">
      <tr align="center">
        <th width="15%">Check Series</th>
        <th width="20%">Accounts and Explanations</th>
        <th>UACS Object Code</th>
        <th width="20%">Debit Amount</th>
        <th width="20%">Credit Amount</th>
      </tr>
    </thead>
    <tbody >
      <tr>
        <td>
          <div >
            <div >
              <button > </button>
            </div>
            <div >
              <div >
                <input type="text" name="" style="font-size:12px"  placeholder="Check No" id="expendable_furniture_check[]">
              </div>
            </div>
          </div>
        </td>
        <th>Furniture and Fixtures</th>
        <td>12345</td>
        <td>
          <div >
            <span  style="font-size: 9pt">P</span>
            <input type="text" style="font-size:12px"  placeholder="0.00" id="expendable_furniture_debit[]">
          </div>
        </td>
        <td>
          <div >
            <span  style="font-size: 9pt">P</span>
            <input type="text" style="font-size:12px" placeholder="0.00"  disabled>
          </div>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td></td>
        <td colspan="2">
          <h5 align="right"><b>SUB TOTAL</b></h5>
        </td>
        <td>
          <div >
            <span  style="font-size: 16pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" name="sub_debit"  style="font-size: 16pt; font-weight: bold;"
              placeholder="0.00" disabled="" id="sub_debit">
          </div>
        </td>
        <td>
          <div >
            <span  style="font-size: 16pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" name="sub_credit"  id="sub_credit" style="font-size: 16pt; font-weight: bold;"
              placeholder="0.00" disabled="">
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

CodePudding user response：

The issue is that at the time you add the event handler to the input field ($expenses_debit.on("input", () => {) there is only one input field. If you add another one the event handler will not be added automatically, you have to do it yourself. You could do so by wrapping the first lines in a function and call it at the beginning and when you add a new input field.

function init_input()
{
  const $expenses_debit = $(".expenses_debit");
  const $res_debit = $("#sub_debit");
  $expenses_debit.on("input", () => {

   const total = $expenses_debit.get().reduce((acc, el) => (acc  = parseFloat(el.value, 10) || 0), 0).toFixed(2) ;
    $res_debit.val(total);
  });
}

jQuery($ => {
  
  init_input();
});

$(document).ready(function() {
  var max_fields      = 10; //maximum input boxes allowed
  var wrapper       = $(".input_fields_wrap27"); //Fields wrapper
  var add_button      = $(".add_field_button27"); //Add button ID
  
  var x = 1; //initlal text box count
  $(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
      x  ; //text box increment
      $(wrapper).append('<tr><td><div ><div ><a href="#" ><button >-</button></a></div><div ><div ><input type="text" name="" style="font-size:12px"  placeholder="Check No" id="expendable_furniture_check[]"></div></div></div></td><th>Furniture and Fixtures</th><td>12345</td><td><div ><span  style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off"  placeholder="0.00" id="expendable_furniture_debit[]"></div></td><td><div ><span  style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off"  placeholder="0.00" disabled></div></td></tr>'); 

      // add event handler to the new input field
      init_input();

    }
  });
  
  $(wrapper).on("click",".remove_field27", function(e){
    e.preventDefault(); $(this).closest("tr").remove(); x--;
  })
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
 <table  align="center" style="font-size: 9pt">
                    <thead style="font-size: 11pt">
                        <tr align="center">
                            <th width="15%">Check Series</th>   
                            <th width="20%">Accounts and Explanations</th>
                            <th>UACS Object Code</th>
                            <th width="20%">Debit Amount</th>
                            <th width="20%">Credit Amount</th>
                        </tr>
                    </thead>
<tbody >
                    <tr>
                        <td>
                            <div >
                                <div >
                                    <button > </button>
                                </div>
                                <div >
                                    <div >
                                        <input type="text" name="" style="font-size:12px"  placeholder="Check No" id="expendable_furniture_check[]">
                                    </div>                              
                                </div>
                            </div>
                        </td>                                       
                        <th>Furniture and Fixtures</th>
                        <td>12345</td>
                        <td>
                            <div >
                              <span  style="font-size: 9pt">P</span>
                              <input type="text" style="font-size:12px"  placeholder="0.00" id="expendable_furniture_debit[]">
                            </div>
                        </td>
                        <td>
                            <div >
                              <span  style="font-size: 9pt">P</span>
                              <input type="text" style="font-size:12px" placeholder="0.00"  disabled>
                            </div>                  
                    </tr>
                 </tbody>
                <tbody>
                    <tr>
                        <td></td>  
                        <td colspan="2"><h5 align="right"><b>SUB TOTAL</b></h5></td>
                        <td>
                            <div >
                              <span  style="font-size: 16pt">P</span>
                              <input type="text" style="font-size:12px" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" name="sub_debit"  style="font-size: 16pt; font-weight: bold;" placeholder="0.00" disabled="" id="sub_debit" >
                            </div>
                        </td>
                        <td>
                            <div >
                              <span  style="font-size: 16pt">P</span>
                              <input type="text" style="font-size:12px" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" name="sub_credit"  id="sub_credit"  style="font-size: 16pt; font-weight: bold;"  placeholder="0.00" disabled="">
                            </div>
                        </td>
                    </tr>
                 </tbody>           
           </table>
</body>