saminathan saminathan - 4 months ago 10
Javascript Question

How to assign unique id to each select box for the following scenario

I have used below code to develop dynamic select box which has Unique id's.i.e In single click i am generating two select boxes.

$(function () {
var nextRowID = 0;
var nextRowID1 = 1;
$("body").on("click", "#btnAdd", function () {
var id = ++nextRowID;
var id1 = ++nextRowID1;
var partipiansRow = '<div><select class="drop_dwn_mult" id="name' + id + '"><option>Sample1</option><option>Sample2</option><option>Sample3</option><option>Sample4</option></select><select class="drop_dwn_mult" id="name' + id1 + '"><option>Sample1</option><option>Sample2</option><option>Sample3</option><option>Sample4</option></select>' +
'<i class="fa fa-minus-square remove" aria-hidden="true"></i><i class="fa fa-plus-square" aria-hidden="true" id="btnAdd"></i></div>';
$('#TextBoxContainer').append(partipiansRow);


});


But the ouput i am getting as below as

<div id="TextBoxContainer">
<!--Textboxes will be added here -->
<div><select class="drop_dwn_mult" id="name1"><option>Sample1</option><option>Sample2</option><option>Sample3</option><option>Sample4</option></select><select class="drop_dwn_mult" id="name2"><option>Sample1</option><option>Sample2</option><option>Sample3</option><option>Sample4</option></select><i class="fa fa-minus-square remove" aria-hidden="true"></i><i class="fa fa-plus-square" aria-hidden="true" id="btnAdd"></i></div>
<div><select class="drop_dwn_mult" id="name2"><option>Sample1</option><option>Sample2</option><option>Sample3</option><option>Sample4</option></select><select class="drop_dwn_mult" id="name3"><option>Sample1</option><option>Sample2</option><option>Sample3</option><option>Sample4</option></select><i class="fa fa-minus-square remove" aria-hidden="true"></i><i class="fa fa-plus-square" aria-hidden="true" id="btnAdd"></i></div></div>


In the above HTML totally i have four select boxes in which i cant able to generate unique ID's.

Please help me to generate unique id's for all select boxes.

Answer

If id1 is always simply 1 greater than id, you could increment nextRowID as you define id & id1. It will simplify your counter (nextRowID) while avoiding the condition where the previous nextRowID and current nextRowID1 are the same number.

var nextRowID = 0;
//var nextRowID1 = 1;
$("body").on("click", "#btnAdd", function() {
  var id = ++nextRowID;
  var id1 = ++nextRowID;
  var partipiansRow = '<div>[id = name'+ id +'] <select class="drop_dwn_mult" id="name' + id + '"><option>Sample1</option><option>Sample2</option><option>Sample3</option><option>Sample4</option></select><br />[id = name'+ id1 +']<select class="drop_dwn_mult" id="name' + id1 + '"><option>Sample1</option><option>Sample2</option><option>Sample3</option><option>Sample4</option></select>' +
    '<i class="fa fa-minus-square remove" aria-hidden="true"></i><i class="fa fa-plus-square" aria-hidden="true" id="btnAdd"></i></div>';
  $('#TextBoxContainer').append(partipiansRow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<div id="TextBoxContainer"></div>

Comments