clone is not working properly

Question

I am trying this code, but apparently i have some bug.

The problem is here, because without this part all works correctly:

        .find('ol:first >li:eq(0)')
        .attr('id', 'one' + increment)
        .find('ol:first >li:eq(1)')
        .attr('id', 'two' + increment)

full source:

<div id="container">
<div id="input0" class="clonedInput">
<br>
    <ol id="vall0">
    <li id="one0">one</li>
    <li id="two0">two</li>
    </ol>
<input id="value0" size="20" type="text"/>
</div>
</div>

    <script type="text/javascript">
      $(document).ready(function() {
    var $container = $('#container'),

        $clone = $('#input0'),

        numClones = 4,

        startNumber = 1;

    function cloneInput(num, increment, $elem) {
        var $newElem = $elem
        .clone(true)
        .attr('id', 'input' + increment)
        .find('ol:first')
        .attr('id', 'vall' + increment)
        .find('ol:first >li:eq(0)')
        .attr('id', 'one' + increment)
        .find('ol:first >li:eq(1)')
        .attr('id', 'two' + increment)
        .end();

        $newElem.children(':text')
        .prop('id', "value" + increment)
        .prop('valor', 'valor')
        .val('');


        $container.append($newElem);

        if (num > 1) {
            var next = num - 1;
            var incr = increment + 1;
            cloneInput(next, incr, $elem);
        }
    }

    cloneInput(numClones, startNumber, $clone);
    });
        </script>

demo

Answer 1

One possible solution is to change your problem part to:

.find('>li:eq(0)')
.attr('id', 'one' + increment)
.end()
.find('>li:eq(1)')
.attr('id', 'two' + increment)
.end()

Also see my jsfiddle.