How to count and make change in all Elementid

Question

What this code allows is to modify the value of the field from 0.00 to the desired value, even if it is 2, it replaces for 2.00.

My problem is that it only replaces 1 INPUT, if you have 2 INPUTS with the same ID it only modifies 1.

How do I modify them all with the same Elmt ID.

<script>

document.getElementById('currency').onblur = function (){    
    //number-format the user input
    this.value = parseFloat(this.value.replace(/,/g, ''))
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    //set the numeric value to a number input
    document.getElementById('number').value = this.value.replace(/,/g, '')
} 

Answer 1

using getElementById("id") it will return only the first element with id, so to select all elements with same id we can use querySelectorAll("#id"), which will return all elements with that id.

let elements = document.querySelectorAll("#currency");

after selecting all the elements we can use the foreach to add the event in each element in this way:

   elements.forEach(el => {
        el.onblur = () => {
            //number-format the user input
            el.value = parseFloat(el.value.replace(/,/g, ''))
                .toFixed(2)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            //set the numeric value to a number input
            el.value = el.value.replace(/,/g, '');
        };
    });

remembering that it is not recommended to have more than one element with the same id in an html file, I believe that you could identify the elements using a class and get the elements this way:

let elements = document.querySelectorAll(".currency");

So you could pass a foreach on Elements in the same way.

html used for testing:

<td>
    <tr>
        <input name='product_cost[]' placeholder='0.00' class='currency' type='text' class='form-control'
            placeholder='0.00' required>
    </tr>

</td>
<td>
    <input name='product_pvp[]' placeholder='0.00' class='currency' type='text' class='form-control' placeholder='0.00'
        required>
</td>
<td>
    <input name='product_pvp[]' placeholder='0.00' class='currency' type='text' class='form-control' placeholder='0.00'
        required>
</td>
<td>
    <input name='product_pvp[]' placeholder='0.00' class='currency' type='text' class='form-control' placeholder='0.00'
        required>
</td>