Clone the things
How do I make an clone the things?
What is a clone the things? How do you make a clone the things? This script and codes were developed by UX Snippets on 27 October 2022, Thursday.
Clone the things - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clone the things</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="row-group" class="contact-group-01"> <div id="contactDL_0" class="row form-row"> <div class="form-inline"> <div class="form-group has-feedback gutter"> <input type="input" class="form-control" placeholder="Lookup Name"> <i class="fa fa-search form-control-feedback"></i> </div> <div class="form-group gutter"> <input type="input" class="form-control" placeholder="[email protected]"> </div> <div class="form-group gutter"> <select class="form-control" id="selectDL_0"> <option value="Role">Contract Representative</option> </select> </div> <div class="form-group gutter"> <button type="button" class="btn btn-default remove">×</button></div> <button id="btn-name" class="btn btn-primary clone">Add</button> </div> </div>
</div>
<div id="row-group" class="contact-group-02"> <div id="contactAFKL_0" class="row form-row"> <div class="form-inline"> <div class="form-group has-feedback gutter"> <input type="input" class="form-control" placeholder="Lookup Name"> <i class="fa fa-search form-control-feedback"></i> </div> <div class="form-group gutter"> <input type="input" class="form-control" placeholder="[email protected]"> </div> <div class="form-group gutter"> <select class="form-control" id="selectDL_0"> <option value="Role">Contract Representative</option> </select> </div> <div class="form-group gutter"> <button type="button" class="btn btn-default remove">×</button></div> <button id="btn-name" class="btn btn-primary clone2">Add</button> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Clone the things - Script Codes CSS Codes
.form-control { font-size: 13px;
}
#row-group { margin: 50px;
}
#row-group .form-group { margin: 5px;
}
.clone, .clone2 { display: none;
}
.contact-group-01 > div:last-of-type .clone, .contact-group-02 > div:last-of-type .clone2 { display: block;
}
Clone the things - Script Codes JS Codes
var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".contact-group-01 .form-row").length;
function clone(){ $(this).parents(".form-row").clone() .appendTo(".contact-group-01") .attr("id", "contactDL_" + cloneIndex) .find("*") .each(function() { var id = this.id || ""; var match = id.match(regex) || []; if (match.length == 3) { this.id = match[1] + (cloneIndex); } }) .on('click', 'button.clone', clone) .on('click', 'button.remove', remove) .val(''); cloneIndex++;
}
function remove(){ $(this).parents(".form-row").remove();
}
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
function clone2(){ $(this).parents(".contact-group-02 .form-row").clone() .appendTo(".contact-group-02") .attr("id", "contactAFKL_" + cloneIndex) .find("*") .each(function() { var id = this.id || ""; var match = id.match(regex) || []; if (match.length == 3) { this.id = match[1] + (cloneIndex); } }) .on('click', 'button.clone2', clone2) .on('click', 'button.remove2', remove2) .val(''); cloneIndex++;
}
$("button.clone2").on("click", clone2);
Developer | UX Snippets |
Username | appirio-ux |
Uploaded | October 27, 2022 |
Rating | 3 |
Size | 2,684 Kb |
Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Animated SVG | 4,028 Kb |
Sample SVG Icon Font | 2,266 Kb |
Color Indicators | 3,236 Kb |
Range Slider | 3,471 Kb |
Weekly Email - 01 | 2,893 Kb |
A Pen by UX Snippets | 1,581 Kb |
Responsive Table | 3,938 Kb |
Email Sample | 2,749 Kb |
CSS Org Chart | 3,882 Kb |
Country and State | 29,072 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Custom checkbox example | Capelo | 3,495 Kb |
Layout 11 | Altynai | 1,690 Kb |
Basic template | Tomcat | 1,675 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Light Switch | Bartuc | 4,933 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
React Vote Component | Souporserious | 5,465 Kb |
404 Error Page | WebSonick | 3,203 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!