I have the following code, where I have a div id=parent and a div id=child
<div class="row p-0 m-0" id="padre">
<div class="row col-12" id="hijo">
<div class="col-md-4 pr-1">
<div class="form-group">
<?php echo $this->Form->control('masked_start_date',
['name' => 'start_date',
'id' => 'datetimepickerstart',
'required'=>true,
'class' => 'datetimepicker',
'placeholder' => $petsService->start_date,
'value' => $petsService->start_date]); ?>
</div>
</div>
<div class="col-md-4 pr-1">
<div class="form-group">
<?php echo $this->Form->control('masked_end_date',
['name' => 'end_date',
'required'=>true,
'id' => 'datetimepickerend',
'class' => 'datetimepicker',
'placeholder' => $petsService->end_date,
'value' => $petsService->end_date]); ?>
</div>
</div>
<div class="col-md-2 h-100">
<div class="col-12 p-0 m-0">
<div class="col-12 d-flex align-items-center justify-content-center">
<label><?= __('Payed')?></label><br>
</div>
<div class="col-12 d-flex align-items-center justify-content-center">
<?php
echo $this->Form->control('confirmed',[
'label' => '',
'style' => 'transform: scale(1.5); height:40px;',
'class' => 'pl-5'
]);
?>
</div>
</div>
</div>
<div class="col-md-2 h-100 ">
<div class="col-12 d-flex align-items-center justify-content-center">
<label><?= __('More')?></label><br>
</div>
<div id="btn-mas" class="col-12 d-flex align-items-center justify-content-center" style="height:50px;">
<i class="fa fa-plus" onclick="agregar();"></i>
</div>
</div>
</div>
</div>
<script>
function agregar(){
$("#hijo").clone().appendTo("#padre");
}
</script>
Works fine, clone me! The problem is that using this function or method clones everything exactly the same.
I need to differentiate the IDs so I can manipulate them later. The idea is to be able to differentiate the cloned nodes that are created by clicking on + and process the data obtained.
Try it with this:
As you have requested in your comments, they are now created with ids sequentially.
Explanation:
By wanting it sequentially, we first create a global variable named
contadorHijos
to serve as a counter each time we execute the functionagregar
.Inside the function we assign to a local variable named
clonado
a clone of the element with idhijo
. Then we change the attributeid
by assigning the namehijo_
plus a number that will be given to us by the global variablecontadorHijos
. Then we increment the counter so that the next time the function is called itagregar
assigns another higher number. And finally we add it to the element with idpadre
.