jQuery multiple form repeater - html

Question

I am using a form repeater but my goal is to have multiple repeaters to use it on my project. I tried to search on different forums but I didn't get positive result to follow. my current code only repeats for the first div only i.e. targetDiv one and doesn't repeat for the second div
I want to repeat all divs targetDiv
jsFiddle
https://jsfiddle.net/infohassan/qbontgj6/2/
Here is my HTML
<div class="row targetDiv" id="div0">
<div class="col-md-12">
<div id="myRepeatingFields" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Field Ends -->
</div>
</div>
</div>
</div>
<div class="row targetDiv" id="div1">
<div class="col-md-12">
<div id="myRepeatingFields" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Field Ends -->
</div>
</div>
</div>
</div>
Here is my JS
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.fvrduplicate:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<i class="fa fa-minus" aria-hidden="true"></i>');
}).on('click', '.btn-remove', function(e) {
e.preventDefault();
$(this).parents('.entry:first').remove();
return false;
});
});

Answer 1

I tweaked your code a little bit, maybe this is what you want?
I made the id attributes in your .fvrduplicate-divs unique ("group1" and "group2")
the controlForm is now not taken from the first .frvduplicate div but from the .closest() one to the clicked button
the rest is mostly unchanged, however, I added the "+" and the "-" for the buttons (as the css classes fa-minus and fa-plus are curently undefined in this snippet) and separated the two forms with an <hr>-element.
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $(this).closest('.fvrduplicate'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<i class="fa fa-minus" aria-hidden="true">-</i>');
}).on('click', '.btn-remove', function(e) {
$(this).closest('.entry').remove();
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row targetDiv" id="div0">
<div class="col-md-12">
<div id="group1" class="fvrduplicate">
<div class="row entry">
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true">+</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr> <!-- second form starts below: -->
<div class="row targetDiv" id="div1">
<div class="col-md-12">
<div id="group2" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true">+</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>