<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
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
=
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
=
</
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
>