how to change multiple input value with onchange jquery-CodePudding

first i have input with name="ot_jam[' number ']" and onchange"otNormal(this.value)", second i have input with name="ot_uang[' number ']" so now i have multiple input and i want to every ot_jam just change value ot_uang with same name, my problem is im stuck in when i have multiple input and i change value ot_jam but i just change the last input with name ot_uang

sorry my english so bad im still learning.

This my HTML Code

 <div >
 <button type="button"  id="BarisBaru"></button>
 </div>

<div  id="tableLoop"></div>

This my Js Code

<script type="text/javascript">
$(document).ready(function() {
            for (baris = 1; baris <= 1; baris  ) {
                Barisbaru();
            }
            $('#BarisBaru').click(function(e) {
                e.preventDefault();
                Barisbaru();
            });

 });

 function otNormal(value) {
            let a = 1.5 * (value / 173) * 3000000;
            const b = Math.round(a);
            const currency = b.toString().replace(/(\d)(?=(\d{3}) (?!\d))/g, "$1.");
            var number = $("#tableLoop .row .num").length;
            $('[name="ot_uang['   number   ']"]').val(currency);
            // var xx = $('[name="ot_jam['   number   ']"]').val();
            // if (xx == 0) {
            //     $('[name="ot_uang['   number   ']"]').val("kosong");
            // } else {
            //     $('[name="ot_uang['   number   ']"]').val(currency);
            // }
            
        }

        function Barisbaru() {
            $(document).ready(function() {
                $("[data-toggle='tooltip']").tooltip();
            });
            var number = $("#tableLoop .row .num").length   1;
            var Baris = '<div >';
            Baris  = '<div >';
            Baris  = '<span>OT.<span ></span></span>';
            Baris  = '</div>';
            Baris  = '<div >';
            Baris  = '<input  type="number" name="ot_jam['   number   ']" value="0.0" onchange="otNormal(this.value)">';
            Baris  = '</div>';
            Baris  = '<div >';
            Baris  = '<span>Jam => Rp.</span>';
            Baris  = '</div>';
            Baris  = '<div >';
            Baris  = '<input  type="text" name="ot_uang['   number   ']" value="0" readonly>';
            Baris  = '</div>';
            Baris  = '<button  data-toggle="tooltip" id="HapusBaris"></button>';

            $("#tableLoop").append(Baris);
        }

</script>

CodePudding user response：

The reason you were only getting the last input was due to "var number" inside otNormal(). It was always going to get the last number by using the length. You can grab the correct number by taking it from the otjam element name instead.

Get correct number Example:

const number = e.target.name.replace(/[^0-9]/g, '');

I refactored your code a little bit to make it easier to edit later and added step by step comments to help break down what each line is doing.

Document.ready()

Cached the elements you will be using. (barisDiv & tableElement)
Changed click to on.click, also moved it out of the html
Added change event to the parent table instead of the inputs
Moved button click callback out of html

otNormal()

changed function to return changed value (change event will update uAng now)

BarisBaru()

removed document.ready() (Not needed here)

 $(document).ready(function() {
    Barisbaru();
    const barisDiv = $('#BarisBaru');
    const tableElement = $('#tableLoop');
    //changed older click handler to on
    barisDiv.on("click", (e)=>{
      e.preventDefault();
      Barisbaru();
    });
    //target any button (old or new) inside the table
    tableElement.on("click", "button", (e)=>{
        console.log("do tooltip for ", e.target);
    });
    //target any input inside the table. uAng is readonly so this will only trigger on jam
    tableElement.on("change", "input", (e)=>{
        const element = e.target; //get the changed input
        const value = element.value; //get the value
        const number = element.name.replace(/[^0-9]/g, ''); //strip the number from the element name
        const uAngInput = $('input[name="ot_uang[' number ']"]'); //get the uAng Input
        uAngInput.val(otNormal(value)); //replace the value
    });  
 });
 
function otNormal(value) {
    let a = 1.5 * (value / 173) * 3000000;
    const b = Math.round(a);
    return b.toString().replace(/(\d)(?=(\d{3}) (?!\d))/g, "$1.");
}

function Barisbaru() {
    var number = $("#tableLoop .row .num").length   1;
    var Baris = '<div >';
    Baris  = '<div >';
    Baris  = '<span>OT.<span ></span></span>';
    Baris  = '</div>';
    Baris  = '<div >';
    Baris  = '<input  type="number" name="ot_jam['   number   ']" value="0.0">';
    Baris  = '</div>';
    Baris  = '<div >';
    Baris  = '<span>Jam => Rp.</span>';
    Baris  = '</div>';
    Baris  = '<div >';
    Baris  = '<input  type="text" name="ot_uang['   number   ']" value="0" readonly>';
    Baris  = '</div>';
    Baris  = '<button  data-toggle="tooltip" id="HapusBaris">HapusBaris</button>';

    $("#tableLoop").append(Baris);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
 <button type="button"  id="BarisBaru">BarisBaru</button>
 </div>

<div  id="tableLoop"></div>