Activate JS functionality on clone two inputs fields - php

Question

i have a form with various fields, and a pair of buttons of clone and remove the cloned part of the form.
Also, i have in those fields a pair of inputs of integers that when i click in one of them
the value "jump" to the other field when clicked.
The problem is when i clone the form the functionality of "jump" do not attach to the other cloned inputs.
this is the clone function :
var regex = /^(.+?)(\d+)$/i;
var cloneIndex = 1;//$(".clonedInput").length;
function clone(){
cloneIndex++;
$(this).parents(".clonedInput").clone()
.appendTo("form")
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function() {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
//console.log(this.val);
//this.value = $(match).val();
//console.log("El valor seleccionado es ");
//this.val = match[1].val;
}
})
.on('click', 'button.clone', clone)
.on('click', 'button.remove', remove);
return false;
}
function remove(){
if($('.actions').length == 2){
console.log('accion cancelada');
}else{
$(this).parents(".clonedInput").remove();
}
return false;
}
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
an approach to this was made with this code using dinamicaly for php
$("input[id^='montoa']").on("click", function(e){
var montoa_id = this.id;
var montob_id = 'montob'+montoa_id.match(/(\d+)/g)[0];
$('#'+montoa_id).value = $('#'+montob_id).val();
$('#'+montob_id).value = '';
});
the inputs are this :
<div class="col-md-1">
<input type="text" name="monto[]" class="form-control" id="montoa1" placeholder="Debe">
</div>
<div class="col-md-1">
<input type="text" name="monto[]" class="form-control" id="montob1" placeholder="Haber">
</div>
and all the n-cloned fields are numbered by auto-increase the id like id="montoa2" and id="montob3" and so on.
all comments wil be very appreciated.
EDIT : Create a jsfiddle https://jsfiddle.net/o63c61sj/

Answer 1

today solved !
This time was add a param to a .clone() function
This because this is a deepWithDataAndEvent clonation event as jquery says.
.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
The solution this time for me was clone(true).
Hope someone else could be useful. `
$(document).ready(function() {
$("input[id^='montoa']").attr("placeholder", "dollars");
$("input[id^='montob']").attr("placeholder", "dollars");
$("#montoa1").on('click', function() {
var montoa = $('#montoa1').val();
$('#montoa1').val($('#montob1').val());
$('#montob1').val(0);
});
$("#montob1").on('click', function() {
var montoa = $('#montoa1').val();
$('#montoa1').val(0);
$('#montob1').val(montoa);
});
}
/*
$("input[id^='montoa']").on("click", function(e){
var montoa_id = this.id;
var montob_id = 'montob'+montoa_id.match(/(\d+)/g)[0];
$('#'+montoa_id).value = $('#'+montob_id).val();
$('#'+montob_id).value = '';
});
$("input[id^='montob']").click(function(){
console.log(this.id);
});
*/
);
var regex = /^(.+?)(\d+)$/i;
var cloneIndex = 1; //$(".clonedInput").length;
function clone() {
cloneIndex++;
$(this).parents(".clonedInput").clone(true)
.appendTo("form")
.attr("id", "clonedInput" + 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);
return false;
}
function remove() {
if ($('.actions').length == 2) {
console.log('accion cancelada');
} else {
$(this).parents(".clonedInput").remove();
}
return false;
}
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="#" method="post">
<div id="clonedInput1" class="clonedInput">
<div class="form-group row">
<div class="actions">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="actions">
<button class="clone btn btn-success">Duplicar</button>
<button class="remove btn btn-warning">Quitar</button>
</div>
</div>
<div class="panel-body">
<div class="form-group row">
<div class="col-md-2">
same js functions on all cloned
</div>
<div class="col-md-1">
<input type="text" name="monto[]" class="form-control" id="montoa1" placeholder="Debe">
</div>
<div class="col-md-1">
<input type="text" name="monto[]" class="form-control" id="montob1" placeholder="Haber">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
`