.clone() put's element multiply and i want only once

Question

I have something like this:

<div class="cont">
    <img src="http://something1.png" class="1">
</div>
<div class="cont">
    <img src="http://something2.png" class="1">
</div>
<div class="cont">
    <img src="http://something3.png" class="1">
</div>
.
.
.

And whant to make from it something like that:

<div class="cont">
   <img src="http://something1.png" class="1">
   <img src="http://something1.png" class="2">
</div>
<div class="cont">
   <img src="http://something2.png" class="1">
   <img src="http://something2.png" class="2">
</div>
<div class="cont">
   <img src="http://something3.png" class="1">
   <img src="http://something3.png" class="2">
</div>
.
.
.

I'm using this code:

$('.1').clone().toggleClass("1 2").insertAfter('.1');

But it copy every img with class="1" and put it after every img with class="1" so class="2" is multiply in every div. Is there way to do it like i wont?

Answer 1

You'll have to use .each():

$('.1').each(function() {
    $(this).clone().toggleClass('1 2').insertAfter(this);
});