Dynamically build input fields after deletion start index from the highest number?
2
I have from where user should be able to add new rows. My logic works fine and all new fields get unique id's and names but the problem occurs when I delete any other row but the last one. Here is example of my code:
$("#add_row").on('click', addRow);
function addRow() {
var index = $(".data-list").children('div').length + 1;
console.log(index);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>If I add two more rows (total number of rows 3) and delete the second row, then next time when user clicks on Add Row index will start from 3 and that index already exists. I'm wondering how to work around this problem? Is there a good way to start index from the last highest number?
javascript jquery indexing
asked Nov 14 '18 at 12:24
espresso_coffeeespresso_coffee
2,03052046
add a comment |
2
I have from where user should be able to add new rows. My logic works fine and all new fields get unique id's and names but the problem occurs when I delete any other row but the last one. Here is example of my code:
$("#add_row").on('click', addRow);
function addRow() {
var index = $(".data-list").children('div').length + 1;
console.log(index);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>If I add two more rows (total number of rows 3) and delete the second row, then next time when user clicks on Add Row index will start from 3 and that index already exists. I'm wondering how to work around this problem? Is there a good way to start index from the last highest number?
javascript jquery indexing
asked Nov 14 '18 at 12:24
espresso_coffeeespresso_coffee
2,03052046
Why not keep a counter and start from there? After all, you just need it to be unique right?
– Alain Cruz
Nov 14 '18 at 12:27
@AlainCruz I was wondering what is the best way to keep counter index? Yes, I just need each index to be unique.
– espresso_coffee
Nov 14 '18 at 12:28
Well, I would just keep a var with the last id assigned. Every time you add a new one, I would just add one to it.
– Alain Cruz
Nov 14 '18 at 12:30
@AlainCruz Can you please provide an example? Thank you.
– espresso_coffee
Nov 14 '18 at 12:48
I just did. Hope this solves your issue.
– Alain Cruz
Nov 14 '18 at 13:38
add a comment |
2
2
2
I have from where user should be able to add new rows. My logic works fine and all new fields get unique id's and names but the problem occurs when I delete any other row but the last one. Here is example of my code:
$("#add_row").on('click', addRow);
function addRow() {
var index = $(".data-list").children('div').length + 1;
console.log(index);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>If I add two more rows (total number of rows 3) and delete the second row, then next time when user clicks on Add Row index will start from 3 and that index already exists. I'm wondering how to work around this problem? Is there a good way to start index from the last highest number?
javascript jquery indexing
asked Nov 14 '18 at 12:24
espresso_coffeeespresso_coffee
2,03052046
I have from where user should be able to add new rows. My logic works fine and all new fields get unique id's and names but the problem occurs when I delete any other row but the last one. Here is example of my code:
$("#add_row").on('click', addRow);
function addRow() {
var index = $(".data-list").children('div').length + 1;
console.log(index);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>If I add two more rows (total number of rows 3) and delete the second row, then next time when user clicks on Add Row index will start from 3 and that index already exists. I'm wondering how to work around this problem? Is there a good way to start index from the last highest number?
$("#add_row").on('click', addRow);
function addRow() {
var index = $(".data-list").children('div').length + 1;
console.log(index);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>$("#add_row").on('click', addRow);
function addRow() {
var index = $(".data-list").children('div').length + 1;
console.log(index);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + index + '" id="frm_column' + index + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + index + '" id="frm_descr' + index + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>javascript jquery indexing
javascript jquery indexing
asked Nov 14 '18 at 12:24
espresso_coffeeespresso_coffee
2,03052046
asked Nov 14 '18 at 12:24
espresso_coffeeespresso_coffee
2,03052046
asked Nov 14 '18 at 12:24
espresso_coffeeespresso_coffee
2,03052046
asked Nov 14 '18 at 12:24
espresso_coffeeespresso_coffee
2,03052046
asked Nov 14 '18 at 12:24
espresso_coffeeespresso_coffee
2,03052046
2,03052046
Why not keep a counter and start from there? After all, you just need it to be unique right?
– Alain Cruz
Nov 14 '18 at 12:27
@AlainCruz I was wondering what is the best way to keep counter index? Yes, I just need each index to be unique.
– espresso_coffee
Nov 14 '18 at 12:28
Well, I would just keep a var with the last id assigned. Every time you add a new one, I would just add one to it.
– Alain Cruz
Nov 14 '18 at 12:30
@AlainCruz Can you please provide an example? Thank you.
– espresso_coffee
Nov 14 '18 at 12:48
I just did. Hope this solves your issue.
– Alain Cruz
Nov 14 '18 at 13:38
add a comment |
Why not keep a counter and start from there? After all, you just need it to be unique right?
– Alain Cruz
Nov 14 '18 at 12:27
@AlainCruz I was wondering what is the best way to keep counter index? Yes, I just need each index to be unique.
– espresso_coffee
Nov 14 '18 at 12:28
Well, I would just keep a var with the last id assigned. Every time you add a new one, I would just add one to it.
– Alain Cruz
Nov 14 '18 at 12:30
@AlainCruz Can you please provide an example? Thank you.
– espresso_coffee
Nov 14 '18 at 12:48
I just did. Hope this solves your issue.
– Alain Cruz
Nov 14 '18 at 13:38
Why not keep a counter and start from there? After all, you just need it to be unique right?
– Alain Cruz
Nov 14 '18 at 12:27
Why not keep a counter and start from there? After all, you just need it to be unique right?
– Alain Cruz
Nov 14 '18 at 12:27
@AlainCruz I was wondering what is the best way to keep counter index? Yes, I just need each index to be unique.
– espresso_coffee
Nov 14 '18 at 12:28
@AlainCruz I was wondering what is the best way to keep counter index? Yes, I just need each index to be unique.
– espresso_coffee
Nov 14 '18 at 12:28
Well, I would just keep a var with the last id assigned. Every time you add a new one, I would just add one to it.
– Alain Cruz
Nov 14 '18 at 12:30
Well, I would just keep a var with the last id assigned. Every time you add a new one, I would just add one to it.
– Alain Cruz
Nov 14 '18 at 12:30
@AlainCruz Can you please provide an example? Thank you.
– espresso_coffee
Nov 14 '18 at 12:48
@AlainCruz Can you please provide an example? Thank you.
– espresso_coffee
Nov 14 '18 at 12:48
I just did. Hope this solves your issue.
– Alain Cruz
Nov 14 '18 at 13:38
I just did. Hope this solves your issue.
– Alain Cruz
Nov 14 '18 at 13:38
add a comment |
1 Answer
1
active
oldest
votes
1
Create a var where you will keep the last id assigned. Every time you add a new one, I would just add one to it. This way, you will always get unique ids and names for your inputs. You can check the following snippet to see what I mean.
$("#add_row").on('click', addRow);
var counter = 1;
function addRow() {
counter++;
console.log(counter);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:37
Alain CruzAlain Cruz
2,1033918
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300198%2fdynamically-build-input-fields-after-deletion-start-index-from-the-highest-numbe%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Create a var where you will keep the last id assigned. Every time you add a new one, I would just add one to it. This way, you will always get unique ids and names for your inputs. You can check the following snippet to see what I mean.
$("#add_row").on('click', addRow);
var counter = 1;
function addRow() {
counter++;
console.log(counter);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:37
Alain CruzAlain Cruz
2,1033918
add a comment |
1
Create a var where you will keep the last id assigned. Every time you add a new one, I would just add one to it. This way, you will always get unique ids and names for your inputs. You can check the following snippet to see what I mean.
$("#add_row").on('click', addRow);
var counter = 1;
function addRow() {
counter++;
console.log(counter);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:37
Alain CruzAlain Cruz
2,1033918
add a comment |
1
1
1
Create a var where you will keep the last id assigned. Every time you add a new one, I would just add one to it. This way, you will always get unique ids and names for your inputs. You can check the following snippet to see what I mean.
$("#add_row").on('click', addRow);
var counter = 1;
function addRow() {
counter++;
console.log(counter);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:37
Alain CruzAlain Cruz
2,1033918
Create a var where you will keep the last id assigned. Every time you add a new one, I would just add one to it. This way, you will always get unique ids and names for your inputs. You can check the following snippet to see what I mean.
$("#add_row").on('click', addRow);
var counter = 1;
function addRow() {
counter++;
console.log(counter);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>$("#add_row").on('click', addRow);
var counter = 1;
function addRow() {
counter++;
console.log(counter);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>$("#add_row").on('click', addRow);
var counter = 1;
function addRow() {
counter++;
console.log(counter);
$('.data-list').append(
'<div class="form-group required data-item">' +
'<label class="control-label" for="colddesc"><span class="label label-default">Column & Description:</span></label>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">' +
'<select class="form-control" name="frm_column' + counter + '" id="frm_column' + counter + '" required>' +
'<option value="">--Choose--</option>' +
'<option value="1">Record ID</option>' +
'<option value="2">Name</option>' +
'<option value="3">Year</option>' +
'</select>' +
'</div>' +
'<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">' +
'<div class="input-group">' +
'<input class="form-control" type="text" name="frm_descr' + counter + '" id="frm_descr' + counter + '" placeholder="Enter Description" required>' +
'<span class="input-group-btn">' +
'<button class="btn btn-danger btn-remove" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
};
$(document.body).on('click', '.btn-remove', function() {
$(this).closest('.data-item').remove();
});<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="data-section">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn" name="add_row" id="add_row">
<span class="glyphicon glyphicon-plus-sign"></span> Add Row
</button>
</div>
</div>
<div class="data-list">
<div class="form-group required data-item">
<label class="control-label" for="coldesc"><span class="label label-default">Column & Description:</span></label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<select class="form-control" name="frm_column1" id="frm_column1" required>
<option value="">--Choose--</option>
<option value="1">Record ID</option>
<option value="2">Name</option>
<option value="3">Year</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
<input class="form-control" type="text" name="frm_descr1" id="frm_descr1" placeholder="Enter Description" required>
</div>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:37
Alain CruzAlain Cruz
2,1033918
answered Nov 14 '18 at 13:37
Alain CruzAlain Cruz
2,1033918
answered Nov 14 '18 at 13:37
Alain CruzAlain Cruz
2,1033918
answered Nov 14 '18 at 13:37
Alain CruzAlain Cruz
2,1033918
2,1033918
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300198%2fdynamically-build-input-fields-after-deletion-start-index-from-the-highest-numbe%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why not keep a counter and start from there? After all, you just need it to be unique right?
– Alain Cruz
Nov 14 '18 at 12:27
@AlainCruz I was wondering what is the best way to keep counter index? Yes, I just need each index to be unique.
– espresso_coffee
Nov 14 '18 at 12:28
Well, I would just keep a var with the last id assigned. Every time you add a new one, I would just add one to it.
– Alain Cruz
Nov 14 '18 at 12:30
@AlainCruz Can you please provide an example? Thank you.
– espresso_coffee
Nov 14 '18 at 12:48
I just did. Hope this solves your issue.
– Alain Cruz
Nov 14 '18 at 13:38