如何在Jquery克隆中更改子代的ID

Question

I need your help, like the title I have to change the id of the child of a cloned element in Jquery but I don't know how to do that ....

There my code (thanks a lot) :

Jquery :

//Clone news
var i = 0;
body.on("click", "button.clone", function(e) {
    e.preventDefault();
    i++;
    var box = $(this).parent().parent();
    var name = "contenu" + i;
    box.clone().insertAfter(box).attr("id", name);
});

HTML :

<div class="drag col-md-12">
                <div id="content" class="content col-md-12">
                    <div id="contenu" class="col-md-9">
                        <span class="text-left">Lorem ipsum dolor sit amet</span>
                        <span style="float: right;">Jeudi 25/02/2016 | 12:00</span>
                        <hr>
                        <h1>Lorem ipsum dolor sit amet</h1>
                        <br />
                        <p class="text-justify test" data-type="text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                        <hr>
                        <img src="img/img_content.png" alt="header" class="img-responsive element_center">
                        <br />
                        <br />
                    </div>
                    <p class="text-center col-md-3">
                        <button class="clone btn btn-primary btn-perso">
                            <span class="glyphicon glyphicon-duplicate" aria-hidden="false"></span>
                            Dupliquer
                        </button>
                        <br />
                        <button class="delete btn btn-primary btn-perso">
                            <span class="glyphicon glyphicon-trash" aria-hidden="false"></span>
                            Supprimer
                        </button>
                    </p>
                </div>
            </div>

Answer 1

Try this

$(box).next().prop("id","new name");

after

box.clone().insertAfter(box).attr("id", name);

https://jsfiddle.net/Ljnxn680/