Question

Let’s say I have:

<input type="text" id="first" attribute1="test" attribute2="hello" attribute3="happy">
<input type="text" id="first" attribute1="test" attribute2="hello" attribute3="happy">
<input type="text" id="first" attribute1="test" attribute2="hello" attribute3="happy">

it may be 2, 3 or more.

I want to select all input’s that has id exactly “first” and then dinamically generantes new ids something like “first_3192391” “first_9592213” but it must be unique for each one, and then replace the “first” for this new one generated.

find("#first").each() {
   new_id = time.now();
   current_id = this.id
   this.replace(current_id, new_id)
}

something like the above algorithim should return:

<input type="text" id="first_32931" attribute1="test" attribute2="hello" attribute3="happy">
<input type="text" id="first_24122" attribute1="test" attribute2="hello" attribute3="happy">
<input type="text" id="first_31292" attribute1="test" attribute2="hello" attribute3="happy">

I was trying to use the replaceWith() method but with no luck.

Answer 1

You need to give each html attribute a class, then select by the class, loop through them and then assign ids

 $(".first").each(function(){
    $(this).attr("id", Math.floor(Math.random()*1000));
    });

HTML:

 <input type="text" class="first" attribute1="test" attribute2="hello" attribute3="happy">
    <input type="text" class="first" attribute1="test" attribute2="hello" attribute3="happy">
    <input type="text" class="first" attribute1="test" attribute2="hello" attribute3="happy">