Not able to get data of select Item using jquery

Not able to get data of select Item using jquery

I have a select option and input type text and a button for adding new rows with it's data.

I have a select option and input type text and a button for adding new rows with it's data.

I tried writing code for that, but while adding new rows on button click the data of select Item is not getting populated.

For more info below is the code

var i=2;
  $(".addmore").on('click',function(){
    var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".</td>";
        data +="<td><input type='select' id='first_name"+i+"' name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' name='last_name[]'/></td></tr>";
        $('table').append(data);
        i++;
});

$(".delete").on('click', function() { $('.case:checkbox:checked').parents("tr").remove(); $('.check_all').prop("checked", false); check();

});

function select_all() { $('input[class=case]:checkbox').each(function(){ if($('input[class=check_all]:checkbox:checked').length == 0){ $(this).prop("checked", false); } else { $(this).prop("checked", true); } }); } <script src="http://demo.smarttutorials.net/auto_table/jquery-1.9.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1" cellspacing="0"> <tr> <th><input class='check_all' type='checkbox' onclick="select_all()"/></th> <th>S. No</th> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td><input type='checkbox' class='case'/></td> <td>1.</td> <td><select name="first_name[]" id="first_name" class="form-group"> <option value="0">--Select--</option> <option value="1">Aisles &amp; common areas</option> <option value="3">BOH Storage area</option> <option value="2">Baggage Counter</option> <option value="6">CSD/Departmental POS</option> <option value="4">Cash room</option> <option value="5">Commercial Desk</option> <option value="7">Display area</option> <option value="8">Dock Doors</option> <option value="9">Electronic items area</option> <option value="10">Emergency exit</option> <option value="11">Escalator &amp; lifts</option> <option value="12">General surveillance areas</option> <option value="13">Goldsmith Room</option> <option value="16">High Value Accessories Rack</option> <option value="15">High pilferage</option> <option value="17">High value FMCG room</option> <option value="18">Inbound</option> <option value="19">Key Item Merchandiser</option> <option value="23">MPOS</option> <option value="20">Main Entry/Exit</option> <option value="21">Manager Room</option> <option value="22">Material Entry / Exit</option> <option value="24">Out bound Office</option> <option value="25">Outdoor Surveillance</option> <option value="27">Outside Trial rooms</option> <option value="26">Outside the frisking area</option> <option value="30">POS</option> <option value="28">Perimeter Area</option> <option value="29">Personal care</option> <option value="31">Power aisles to monitor customer movements</option> <option value="32">Racking area</option> <option value="33">ResQ Room/ Desk</option> <option value="34">Safe room</option> <option value="35">Sales floor</option> <option value="36">Saloon Entry /Exit</option> <option value="37">Shelving Area</option> <option value="38">Staff Entry / Exit</option> <option value="39">Staircase &amp; Fire Exit</option> <option value="40">Stock Room Exit</option> <option value="41">Vendor room</option> <option value="42">Wrap Desk</option> <option value="14">high end Cosmetics</option>

</select></td> <td><input type='text' id='last_name' name='last_name[]'/></td>

  &lt;/tr&gt;
&lt;/table&gt;


 &lt;button type="button" class='delete'&gt;- Delete&lt;/button&gt;
&lt;button type="button" class='addmore'&gt;+ Add More&lt;/button&gt;
&lt;p&gt;
&lt;input type='submit' name='submit' value='submit' class='but'/&gt;&lt;/p&gt;


So how will I be able to get the data of select item.

For more info, see the fiddle here

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Understand and Use JavaScript's .forEach() vs. jQuery's .each()

There are two functions to deal with an array on the client-side – JavaScript's .forEach() and jQuery's .each(). Here, I will teach you how to use both of these methods with some sample code.

jQuery vs Vanilla JavaScript - Beau teaches JavaScript

When should you use jQuery instead of vanilla JavaScript? Is jQuery still relevant? What is jQuery good for? jQuery vs vanilla JavaScript - Beau teaches JavaScript

3 JavaScript libraries to replace jQuery

Ubiquitous jQuery has been outmoded by JavaScript and browser advances. Cash, Zepto, and Syncfusion are three JavaScript libraries picking up where jQuery left off