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

javascript jquery

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

jQuery Live -1 | jQuery AJAX Tutorial for Beginners | jQuery Tutorial

jQuery Live -1 | jQuery AJAX Tutorial for Beginners | jQuery Tutorial

Hire Dedicated Jquery Developer

Are You Looking To Hire a jQuery Programmer? **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, a leading jQuery application development company, can help you build interactive front-end solutions to leapfrog the digital...