jQuery Change all names of div's children elements after clone

Question

So, I have the following jquery code that clones an element when the input value in a certain field increases.

$(document).ready(function(){
    $("#nmovimentos").change(function () {
        var direction = this.defaultValue < this.value
        this.defaultValue = this.value;
        if (direction)
        {
                var $div = $('div[id^="novomov"]:last');
                var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
                var $clone = $div.clone().prop('id', 'novomov'+ num)
                $clone.insertAfter('[id^="novomov"]:last');
        }
        else $('[id^="novomov"]:last').remove();
    });
});

However, it clones a div that contains part of a form with lots of input fields.

<div id="novomov1" class="novomov">
<table id="tab">
<tr name="linear1" id="linear1">
        <td>
            Cardinalidade:<input type="text" name="card1" id="card1" value=""><br>
            Angulo 1:<input type="text" name="param1" id="angulo1" value=""><br>
            Angulo 2:<input type="text" name="param2" id="angulo2" value=""><br>
            Tamanho:<input type="text" name="param3" id="tamanho1" value=""><br>
            Descricao:<input type="text" name="descricao1" id="descricao1" value=""><br>
            Tempo:<input type="text" name="tempo1" id="tempo1" value=""><br>
        </td></tr></table></div>

I need to change the names of all the cloned div's descendents, in order to pass these paramaters to a data base. I thought of incrementing the names by 1, using the var num in the jquery function. However I'm I little lost.. so, any clues on how to do that? thank you very much!

Answer 1

Code changed to retrieve all the inputs inside the cloned div and change its name/id.

<script>    
    $(document).ready(function(){
            $("#nmovimentos").change(function () {
                var direction = this.defaultValue < this.value
                this.defaultValue = this.value;
                if (direction)
                {
                        var $div = $('div[id^="novomov"]:last');
                        var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
                        var $clone = $div.clone().prop('id', 'novomov'+ num)
                        $clone.insertAfter('[id^="novomov"]:last');
                        // get all the inputs inside the clone
                        var inputs = $clone.find('input');
                        // for each input change its name/id appending the num value
                        $.each(inputs, function(index, elem){
                            var jElem = $(elem); // jQuery element
                            var name = jElem.prop('name');
                            // remove the number
                            name = name.replace(/\d+/g, '');
                            name += num;
                            jElem.prop('id', name);
                            jElem.prop('name', name);
                        });
                }
                else $('[id^="novomov"]:last').remove();
            });
        });
    </script>

Answer 2

Instead of parsing the id of the element to get the number you should use the data attribute. Also since you are using jQuery you can use .last() to get the last element with that id. Hope this helps.

     $('#nmovimentos').on('change', function () {
        var direction = this.defaultValue < this.value,
            $last = $('#novomov').last(),
            $clone,
            num;

        this.defaultValue = this.value;

        if (direction) {
            // add id in a data attribute instead of parsing the id
            num = parseInt($last.data('id'), 10) + 1;

            // set clone id data attribute to have the latest number
            $clone = $last.clone().data('id', num);

            // add clone after the last div
            $last.after($clone);
        } else {
            $last.remove();  
        }
    });