Skip to content

Instantly share code, notes, and snippets.

@tghelere
Created September 9, 2019 20:56
Show Gist options
  • Save tghelere/115a498b9dfcb1a17cc26776a3452f99 to your computer and use it in GitHub Desktop.
Save tghelere/115a498b9dfcb1a17cc26776a3452f99 to your computer and use it in GitHub Desktop.
<style>
body { padding: 10px;}
.clonedInput { padding: 10px; border-radius: 5px; background-color: #def; margin-bottom: 10px; }
.clonedInput div { margin: 5px; }
</style>
<div id="clonedInput1" class="clonedInput">
<div>
<label for="txtCategory" class="">Learning category <span class="requiredField">*</span></label>
<select class="" name="txtCategory[]" id="category1">
<option value="">Please select</option>
</select>
</div>
<div class="actions">
<button class="clone">Clone</button>
<button class="remove">Remove</button>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
let cloneIndex = $(".clonedInput").length
function clone(){
$(this).parents(".clonedInput").clone()
.appendTo("body")
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function() {
let id = this.id || ""
let match = id.match(/^(.+?)(\d+)$/i) || []
if (match.length == 3) {
this.id = match[1] + (cloneIndex)
}
}).on('click', 'button.clone', clone).on('click', 'button.remove', remove)
cloneIndex++
}
function remove(){
$(this).parents(".clonedInput").remove()
}
$("button.clone").on("click", clone)
$("button.remove").on("click", remove)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment