In the below snippet, I am able to dynamically add more rows, which works perfectly if no rows have been loaded from serverside code, however if I initially have 2 or more rows loaded from serverside code (or hardcoded as in the case below) and I click the "Add row" button, it adds 1 row per initially loaded row .. in the below snippet it has 4 rows initially loaded, therefor it adds 4 new rows instead of only 1.
How can I fix so that it will only add 1 row per click of the button, and add it below all others?
$(document).ready(function() {
$("#IT_Email_field_DIV").on("click", ".add_new_frm_field_btn_IT_Email", function() {
var index = $(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length 1;
$(".form_field_outer_IT_Email").append(`
<div >
<div >
<div >
<div >
<input type="text" name="IT_Email_field_text[]" id="IT_Email_field_text_${index}" placeholder="Skriv teksten for opgaven" value="" required />
</div>
<div >
<select name="IT_Email_field_type[]" id="IT_Email_field_type_${index}" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div >
<button type="button" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i ></i>
</button>
<button type="button" data-toggle="tooltip" data-html="true" title="Slet felt">
<i ></i>
</button>
</div>
</div>
</div>
</div>`);
$(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email:not(:first)").prop("disabled", false);
$(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email").first().prop("disabled", true);
$('[data-toggle="tooltip"]').tooltip();
});
});
///======Clone method
$(document).ready(function() {
$("#IT_Email_field_DIV").on("click", ".add_node_btn_frm_field_IT_Email", function(e) {
var index = $(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length 1;
var cloned_el = $(e.target).closest(".form_field_outer_row_IT_Email").clone(true);
$(e.target).closest(".form_field_outer_IT_Email").last().append(cloned_el).find(".remove_node_btn_frm_field_IT_Email:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email").first().prop("disabled", true);
//change id
//IT_Email
$(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").last().find("input[type='text']").attr("id", "IT_Email_field_text_" index);
$(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").last().find("select").attr("id", "IT_Email_field_type_" index);
console.log(cloned_el);
//count ;
});
});
$(document).ready(function() {
//===== delete the form fieed row
$("#IT_Email_field_DIV").on("click", ".remove_node_btn_frm_field_IT_Email", function() {
$(this).closest(".form_field_outer_row_IT_Email").remove();
console.log("success");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
<form action="insert_settings_flowcontact_fields.asp" class="needs-validation" name="InsertSettingsFlowcontactFields_IT_Email_Form" id="InsertSettingsFlowcontactFields_IT_Email_Form" method="post">
<div class="container" id="IT_Email_field_DIV">
<div class="row">
<div class="col-md-12 form_sec_outer_task_IT_Email border ">
<div class="row">
<div class="col-md-6 py-2">
<label> Opgave tekst</label>
</div>
<div class="col-md-4 py-2">
<label> Felt type </label>
</div>
<div class="col-md-2 py-2">
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_1" placeholder="Skriv teksten for opgaven" value="Første opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_1" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly" SELECTED>Tekst</option>
<option value="textandfieldfree">Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_2" placeholder="Skriv teksten for opgaven" value="Anden opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_2" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree" SELECTED>Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_3" placeholder="Skriv teksten for opgaven" value="Tredie opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_3" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum" SELECTED>Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_4" placeholder="Skriv teksten for opgaven" value="Fjerde opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_4" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue" SELECTED>Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="container py-3">
<div class="row">
<div class="col">
<button type="button" class="btn btn-light btn-rounded py-0 add_new_frm_field_btn_IT_Email" data-toggle="tooltip" data-html="true" title="Tilføj nyt felt"><i class="fas fa-plus add_icon"></i> Add row</button>
</div>
<div class="col text-right" align="right">
<button type="submit" form="InsertSettingsFlowcontactFields_IT_Email_Form" id="InsertSettingsFlowcontactFields_IT_Email_Btn" class="btn btn-primary btn-rounded py-1" data-toggle="tooltip" data-html="true" title="Gem ovenstående Opgave Felter"><i class="far fa-save"></i> Gem Opgave Felter</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<br>
<br>CodePudding user response：
The offending line is this one:
$(".form_field_outer_IT_Email").append(`
... so when you have 4 elements that match the form_field_outer_IT_Email selector, the append adds to each element in the collection. So with 4, you'll get 4 more.
You can change that to only refer to the last entry of the collection for a single reference by doing:
$(".form_field_outer_IT_Email").last().append(`
Try the example below. Adding the last() is the only change, but I did comment-out the console.logs, because the console output starts to obscure the ADD ROW button after a few clicks in the runnable code's output area.
$(document).ready(function() {
//console.log($(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length)
$("#IT_Email_field_DIV").on("click", ".add_new_frm_field_btn_IT_Email", function() {
// console.log("clicked");
var index = $(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length 1;
$(".form_field_outer_IT_Email").last().append(`
<div >
<div >
<div >
<div >
<input type="text" name="IT_Email_field_text[]" id="IT_Email_field_text_${index}" placeholder="Skriv teksten for opgaven" value="" required />
</div>
<div >
<select name="IT_Email_field_type[]" id="IT_Email_field_type_${index}" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div >
<button type="button" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i ></i>
</button>
<button type="button" data-toggle="tooltip" data-html="true" title="Slet felt">
<i ></i>
</button>
</div>
</div>
</div>
</div>`);
$(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email:not(:first)").prop("disabled", false);
$(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email").first().prop("disabled", true);
$('[data-toggle="tooltip"]').tooltip();
});
});
///======Clone method
$(document).ready(function() {
$("#IT_Email_field_DIV").on("click", ".add_node_btn_frm_field_IT_Email", function(e) {
var index = $(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length 1;
var cloned_el = $(e.target).closest(".form_field_outer_row_IT_Email").clone(true);
$(e.target).closest(".form_field_outer_IT_Email").last().append(cloned_el).find(".remove_node_btn_frm_field_IT_Email:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email").first().prop("disabled", true);
//change id
//IT_Email
$(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").last().find("input[type='text']").attr("id", "IT_Email_field_text_" index);
$(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").last().find("select").attr("id", "IT_Email_field_type_" index);
console.log(cloned_el);
//count ;
});
});
$(document).ready(function() {
//===== delete the form fieed row
$("#IT_Email_field_DIV").on("click", ".remove_node_btn_frm_field_IT_Email", function() {
$(this).closest(".form_field_outer_row_IT_Email").remove();
console.log("success");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
<form action="insert_settings_flowcontact_fields.asp" class="needs-validation" name="InsertSettingsFlowcontactFields_IT_Email_Form" id="InsertSettingsFlowcontactFields_IT_Email_Form" method="post">
<div class="container" id="IT_Email_field_DIV">
<div class="row">
<div class="col-md-12 form_sec_outer_task_IT_Email border ">
<div class="row">
<div class="col-md-6 py-2">
<label> Opgave tekst</label>
</div>
<div class="col-md-4 py-2">
<label> Felt type </label>
</div>
<div class="col-md-2 py-2">
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_1" placeholder="Skriv teksten for opgaven" value="Første opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_1" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly" SELECTED>Tekst</option>
<option value="textandfieldfree">Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_2" placeholder="Skriv teksten for opgaven" value="Anden opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_2" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree" SELECTED>Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_3" placeholder="Skriv teksten for opgaven" value="Tredie opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_3" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum" SELECTED>Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_4" placeholder="Skriv teksten for opgaven" value="Fjerde opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_4" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue" SELECTED>Tekst DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="container py-3">
<div class="row">
<div class="col">
<button type="button" class="btn btn-light btn-rounded py-0 add_new_frm_field_btn_IT_Email" data-toggle="tooltip" data-html="true" title="Tilføj nyt felt"><i class="fas fa-plus add_icon"></i> Add row</button>
</div>
<div class="col text-right" align="right">
<button type="submit" form="InsertSettingsFlowcontactFields_IT_Email_Form" id="InsertSettingsFlowcontactFields_IT_Email_Btn" class="btn btn-primary btn-rounded py-1" data-toggle="tooltip" data-html="true" title="Gem ovenstående Opgave Felter"><i class="far fa-save"></i> Gem Opgave Felter</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<br>
<br>