0
I have a script that already adds and removes the desired fields. I click + it adds and click on the recycle bin icon it removes..
Until then this ok, I copy the div and it creates a new line with the elements
However, there was a need to place an increasing automatic value in the initial field.
01
02
03
So if I remove a line the number must be removed tbm.
[![My need is always in the Tech field. go adding with the sequential number.
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length <= maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});<html lang="pt_br">
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script src="http://lqez.github.io/summernote-ext-print/summernote-ext-print.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
</head>
<body>
<div class="form-group fieldGroup">
<div class="col-md-1 " style="">
<input id="tech[]" name="tech[]" class="form-control" placeholder="" value="1" type="text">
</div>
<div class="col-md-2" style="">
<input id="registro[]" name="registro[]" class="form-control" placeholder="" value="" type="text">
</div>
<div class="col-md-3" style="">
<input id="funcionario[]" name="funcionario[]" class="form-control" placeholder=""value="" type="text">
</div>
<div class="col-md-2" style="">
<input id="funcao[]" name="funcao[]" class="form-control" placeholder="" value="" type="text" >
</div>
<div class="col-md-3" style="">
<input id="assinatura[]" name="assinatura[]" class="form-control" placeholder="" value="" type="text" >
</div>
<div class="col-md-1" style="">
<a href="javascript:void(0)" class=" addMore">
<button class="btn btn-primary " type="button" style=" ">
<i class="fas fa-plus" style="padding: 4px;"></i>
</button>
</a>
</div>
</div>
</body>
</html>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="col-md-1 " style="">
<input id="tech[]" name="tech[]" class="form-control" placeholder="" value="aqui o nº sequencial" type="text">
</div>
<div class="col-md-2" style="">
<input id="registro[]" name="registro[]" class="form-control" placeholder="" value="" type="text">
</div>
<div class="col-md-3" style="">
<input id="funcionario[]" name="funcionario[]" class="form-control" placeholder="" value="" type="text" >
</div>
<div class="col-md-2" style="">
<input id="funcao[]" name="funcao[]" class="form-control" placeholder="" value="" type="text" >
</div>
<div class="col-md-3" style="">
<input id="assinatura[]" name="assinatura[]" class="form-control" placeholder="" value="" type="text" >
</div>
<div class="col-md-1">
<div class=" center" style=" padding: 0px;">
<a href="javascript:void(0)" class="btn btn-danger remove" style="padding: 0px; ;">
<button class="btn btn-danger " type="button" style=" ">
<i class="fas fa-trash-alt center " style="padding: 2px;"></i>
</button>
</a>
</div>
</div>
</div>
Think about the following situation: You have added 2 more groups, thus the sequence: 1,2 and 3. Someone removes the group of inputs that contains the sequence 2, so it would look like this: 1,3. How should the behavior be in this case? What if the user adds a new group? It would be 1.3 and 4?
– Jorge.M
I think you’re in trouble because you’re repeating id s.
– LeAndrade