Advanced Cloning in UI development

User Interface (UI) development is one of the most important activities that influences the visual appearance of a web application and is usually associated with certain hurdles while adding content on a page.

Building the most appropriate UI with suitable characteristics such as fast loading, minimum space utilization, minimized scrolling, responsiveness, etc. is imperative for any organization. We usually try different solutions to overcome such hurdles to fulfil the requirement finally. While working on one such project, I found the necessity of creating dynamic form fields. Vmoksha devised a new mechanism called Advanced Cloning.

What does Advanced Cloning mean?

We generally use HTML element cloning in some web applications, but the default jQuery cloning method does not remove data in the newly cloned element. Hence, we came up with this solution called as Advanced Cloning. It involves in cloning a parent element to child element besides the removal of data or content from the child element.

In short, Advanced Cloning can also be defined as, “Cloning of HTML elements without duplication of data.”

Where can we use Advanced Cloning?

If we consider a job portal, users need to update their skills while registering their details. For this process, the portal requires an option to add multiple skills in a form. In this scenario, we can implement Advanced Cloning concept and fulfil the requirement of the user. Please refer the snapshot below to get a better idea of Advanced Cloning usage.


Implementation of “Advanced Cloning” using Jquery

Here are the steps to be followed while implementing this concept in HTML pages:

Step 1

Add jQuery library in your code as:

<script src=""></script>


Step 2

Add the following code into a js file such as jQuery-advanced-cloning.js

var addmorehelper = function (match, capture){
return '__' + ((+capture + 1) || '');
var wrapper_name = '.add-more-wrapper';
var wrapper = jQuery(this).closest(wrapper_name);
var cur_num = wrapper.children('.clone-content').size();
var clone = wrapper.clone().children('.clone-content:last')
.find('.add-more').val('Remove').removeClass('plus_icon add-more')
.addClass('remove_icon remove-more').end()
.find('select option[value=""]').attr("selected",true).end()
.find("*").each(function(index, element) {
var matches =\d+/);
if(matches && matches.length >= 1){ =\d+)?/, addmorehelper)
var matches =\[([^}]+)\]/);
if(matches && matches.length >= 1){
var st; = [],
return (!isNaN(+s)&&st[i-1]==='['&&st[i+1]===']')?++s:s;
/*Remove more button */
var wrapper = jQuery(this).closest('.clone-content').remove();


Step 3

If you need to upload multiple images, you can use the HTML code as shown below:

<li>Add Images</li>
<div class = "row">
<div class = "col-md-6 pad-10">
<input type="file" name="product_image[]" />
<input type="button" name="add_field" value="Add More" class="add-more”/>

This code basically has three important elements with specific class:

Wrapper Element that contains “add-more-wrapper” class. It is an HTML element to append all clone elements.

Clone Content Element that contains “clone-content” class. It contains content and HTML that need to be cloned.

Add More Button Element that contains “add-more” class. It is the element that calls a JavaScript code and does the magic when the user clicks on the button.

About Ciby Baby Punnamparambil

Ciby is a Solution Architect at Vmoksha with over 12 years of experience in the IT industry. He has in-depth knowledge and industry experience in delivering IoT embedded and Mobility solutions.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>