Loop is not working - clone

JavaScript
1

hi

i have this code

Code: [Select]

<script type="text/javascript">
$(document).ready(function() {
	for ($i=0; $i<4; $i++) {
        var num = $('.clonedInput').length;
        
        var newNum = new Number(num + 1);
        
        var newElem = $('#input' + num).clone(true).prop('id', 'input' + newNum);
        var newElem1 = $('#valores' + num).clone(true).prop('id', 'valores' + newNum);
        

        $('#input' + num).after(newElem);
        $('#valores' + num).insertAfter(newElem1);

    }

    });
</script>

<div id="input1" class="clonedInput">
	<ol id="valores1">
		<li>lowest</li>
		<li>highest</li>
	</ol>
<input readonly id="sliderProgInput" size="20"  name="myformdata[valor][]"/>
</div>

the input id is changed correctly, but valores no. Why ?? Valores is always id=“valores1”, and must be id=“valores1”, id=“valores2”, and so on.

demo

2

I find recursive functions much easier to handle this kind of loop. The problem here was the clone of ‘#input’ + num was also cloning the ‘#valores’ list, so your clone wasn’t actually working.

Here is an example of using a recursive function to clone the inputs:

You might also want to increment the numbering used for #sliderProgInput since that input is also cloned in the process and keeps the same id for each cloned element.

3

wow man, you are a javascript guru.

thanks :slight_smile: