How to assign an id to a child tag of the cloned html ? - GeeksforGeeks

14 Dec, 2021
Here we use in basic HTML, CSS, JavaScript, jQuery and Bootstrap to build this small example project. jQuery is the open-source library which simplifies create and navigation of web application. We are going to use three jQuery methods such as clone(), append() and attr() method for solving this example.
clone() method make a copy of select element 
attr() method for change the name of attribute like id, class etc
append() method is for append the last child of each element in the jQuery collection
Here we are going to clone the bootstrap card which has an id named as ‘cloneme’ and having child tags such as ‘<b>’, ‘<button>’,'<p>’ tag.
Steps:-
When the user presses the ‘click me’ button in the UI section of the web page, then it’s going to run on click listener callback.Inside this callback function, we simply make a copy of HTML tag with id ‘cloneme’. You can also take HTML tag with attribute class.After cloning the Html code, we are going to change the ID of child tag of <b> and <button> tag by finding the tag using its attribute name such as id, class.After finding the tag using its attribute name, then we are going change its attribute name by jQuery attr() method.Attach the clone HTML code to the destination.
When the user presses the ‘click me’ button in the UI section of the web page, then it’s going to run on click listener callback.
Inside this callback function, we simply make a copy of HTML tag with id ‘cloneme’. You can also take HTML tag with attribute class.
After cloning the Html code, we are going to change the ID of child tag of <b> and <button> tag by finding the tag using its attribute name such as id, class.
After finding the tag using its attribute name, then we are going change its attribute name by jQuery attr() method.
Attach the clone HTML code to the destination.
HTML
<!DOCTYPE html><html>  <head>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"           rel="stylesheet"           integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"           crossorigin="anonymous">    <meta charset="utf-8">    <meta name="viewport"          content="width=device-width">    <title>geeksforgeeks</title></head>  <body>    <h1 style="margin-top:10px;color:green;text-align:center;">       GeeksForGeeks      </h1>    <button type="button"             class="btn btn-success"            id="clickme"            style="display: block;  margin-left: auto;  margin-right: auto;  justify-content: center;">Click Me</button>    <hr style="color:green; border: 2px solid">    <div id="cloneme"          style="margin-left:10px;display:none;                 margin-top:10px;">        <div class="card" style="width: 18rem;">            <img class="card-img-top"                  src="https://media.geeksforgeeks.org/wp-content/uploads/20210117221201/download9.png"                  alt="GeeksForGeeks">            <div class="card-body">                <p class="card-text" style="text-align:center;">                    <b id="setID">My Id is 0</b></p>                    <p>                    GeeksforGeeks.org was created with a goal                     in mind to provide well written, well                      thought and well explained solutions                       for selected questions. The core team                        of five super geeks constituting of                        technology lovers and computer science                         enthusiasts have been                    constantly working in this direction.                </p>                  <button type="button"                         id="cancel"                         class="btn btn-success"                         style="justify-content:center;margin-left:auto;                         margin-right:auto;">                            Cancel                </button>            </div>        </div>    </div>    <div id="bucket" class="container-fluid">        <div>            <script src="script.js"></script>            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">           </script>            <script>                let c = 0                  function IDgenerate() {                    return c++                }                $("#clickme").on("click", function() {                    var cn = IDgenerate();                    //clone the html code                    let clone = $("#cloneme").clone()                        //change the css of parent                    clone.css("display", "inline-block")                        //change the id attribute of child tag '<b>'                    clone.find('#setID').attr("id", cn)                        //change the text inside the child tag '<b>'                    clone.find("#" + cn).text("My ID is " + cn)                        //change the id attribute of child tag '<button>'                    clone.find("#cancel").attr("id", "cancel" + cn)                        //add on click listener to the cancel button                     clone.find("#cancel" + cn).on("click", function() {                            clone.css("display", "none")                        })                        // append the clone to the destination                    $("#bucket").append(clone)                })            </script></body>  </html>
Working model of the project
varshagumber28
jQuery-Questions
Picked
Technical Scripter 2020
JQuery
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
jQuery | parent() & parents() with Examples
jQuery | attr() Method
Difference Between JavaScript and jQuery
jQuery | focus() with Examples
How to submit a form using ajax in jQuery ?