Modify JQuery script to allow for multiple on a page


The first row of my fiddle works, however I need to have it modified so that it works for multiple on a page with the id’s being Pixels_X and Percentage_X.

Thank you for any help,

Best Regards,

It sounds like you want to use a for loop:

var pixel, percentage, i;
for (i = 0; i < 100; i += 1) {
    pixel = document.getElementById('Pixels_' + i);
    percentage = document.getElementById('Percentage_' + i);

A better solution though is to not use sequentially named unique identifiers, and to use a class name instead.

<input type="number" name="pixels[]" class="pixels"> 
<input type="number" name="percentage[]" class="percentage">

function addPixelPercentageHandler(pixels, percentage) {
    // add event to pixels and percentage field

var pixels = document.querySelectorAll('.pixels'),
    percentage = document.querySelectorAll('.percentage'),
for (i = 0; i < pixels.length; i += 1) {
    addPixelPercentageHandler(pixels[i], percentage[i]);