Validating multiple inputs with the same ID

Question

I'm developing a "Order by SKU" system in one of my magento stores. It's a simple input of the SKU and Qty desired.

I threw a "add another sku" option in there with the following function:

function adicionarCampos(){
    var str = $('tabs-wrapper-cod').insert( '<div class="enc-cod-tab"><span class="enc_cod_02_home">Código: <input type="text" name="cod[]" value="" class="form_carrinho_cod required-entry" /></span><span class="enc_cod_04_home">Qt: <input type="text" name="qt[]" value="" class="form_carrinho_qt required-entry validate-number" /></span></div>' );
}

This function adds a another "tab" for the user to input another SKU. Here's the main file for reference:

<div id="enc-cod-conteudo" title="Encomendar por código">
    <div class="enc-por-codigo">
        <p class="sub-enc-cod">Nunca foi tão simples encomendar por código!</p>
        <div class="quick-order">
            <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
                <div id="tabs-wrapper-cod">
                    <div class="enc-cod-tab"><span class="enc_cod_02_home">Código: <input type="text" name="cod[]" value="" class="form_carrinho_cod required-entry" /></span><span class="enc_cod_04_home">Qt: <input type="text" name="qt[]" value="" class="form_carrinho_qt required-entry validate-number" /></span></div
                </div>
        </div>
        <div class="actions_carrinho">
            <div class="adicionar-cod" onclick="adicionarCampos();"><span>Adicionar código</span></div>
            <button style="padding-left: 6px;" type="submit" title="Adicionar" class="button btn-update"><span><span>Adicionar ao carrinho</span></span></button>
        </div>
        </form>
    </div>
</div>
</div>

As you see, the added inputs will have the same ID, "sku". Which is what the validation script is looking for, as you can see here:

jQuery(document).ready(function(){
jQuery('#sku').keyup(sku_check);
});

function sku_check(){   
var sku = jQuery('#sku').val();
if(sku == "" || sku.length < 7){
jQuery('#sku').css('border', '1px #CCC solid');
jQuery('#tick').hide();
jQuery('#nome_do_produto').hide();
} else {
jQuery.ajax({
   type: "POST",
   url: "scripts/verificar_cod.php",
   data: 'sku='+ sku,
   cache: false,
   success: function(response){
if(response.length > 0){
    console.log(response);
    jQuery('#sku').css('border', '1px #090 solid');
    jQuery('#tick').fadeIn();
    jQuery('#cross').hide();
    jQuery('#nome_do_produto').html(response);
    jQuery('#nome_do_produto').fadeIn();
    jQuery('#codigo_inexistente').hide();
    } else {
    jQuery('#sku').css('border', '1px #C33 solid');
    jQuery('#cross').fadeIn();
    jQuery('#tick').hide();
    jQuery('#nome_do_produto').hide();
    jQuery('#codigo_inexistente').fadeIn();
         }
    }
    });
}
}

Now, I know this ain't the right way to do it (IDs should be unique by essence), but javascript isnt my "beach" so to speak and I'm stuck on how I will give the add inputs an unique ID, plus, the validation script would have to look for all those incremented IDs.

My question is, what's the best way to approach such a problem? Should I be looking into incrementation through javascript? If so, how?

Answer 1

You are right - IDs must be unique! Add a class to them, for example 'sku-element' and then take all elements using that class:

$(".sku-element") //the result set
//or to go over the full result set and work with each item:
$(".sku-element").each(function(){
    $(this) //each of the selected items
});

The ID's are not needed here (you should not add them for styling either - use classes). If you must have IDs you can simply create a variable to hold the current number of elements and when adding an element change it's id on the fly.