Dropdown inside the second last column of each row except the first one not working

Dropdown inside the second last column of each row except the first one not working

Below in the modal box there is a dropdown in the second last column of an html table.

Below in the modal box there is a dropdown in the second last column of an html table.

My Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
    <div class="modal fade margt20 frm-1" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <form method="POST" enctype="multipart/form-data" autocomplete="off">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>                
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="col-xs-12">
                                <table class="table table-bordered table-responsive" id="dataTable">
                                    <tr>
                                        <th>S.No.</th>
                                        <th>Description</th>
                                        <th>Price</th>
                                        <th>Qty</th>
                                        <th>Amount</th>
                                        <th>Allocate To</th>
                                        <th></th>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td class="text-center">Bag 1</td>
                                        <td>210.00</td>
                                        <td class="text-center">5</td>
                                        <td class="text-center">1050.00</td>
                                        <td class="text-center">
                                            <select id="ddlmanu1" name="ddlmanu[]" class="text-success form-control input-sm">
                                                <option selected disabled value="">-- Select Color --</option>
                                                <option value="Red">Red</option>
                                                <option value="Blue">Blue</option>
                                                <option value="Yellow">Yellow</option>
                                                <option value="Green">Green</option>
                                                <option value="Maroon">Maroon</option>
                                            </select>
                                            <input type="text" readonly id="txtmanuid" class="form-control input-sm" >
                                        </td>
                                        <td class="pull-left">
                                            <button type="button" id="btnalloctomanu" name="btnalloctomanu" class="btn btn-primary form-control btn-sm">Save</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td class="text-center">Bag 2</td>
                                        <td>3600.00</td>
                                        <td class="text-center">10</td>
                                        <td class="text-center">36000.00</td>
                                        <td class="text-center">
                                            <select id="ddlmanu2" name="ddlmanu[]" class="text-success form-control input-sm">
                                                <option selected disabled value="">-- Select Color --</option>
                                                <option value="Red">Red</option>
                                                <option value="Blue">Blue</option>
                                                <option value="Yellow">Yellow</option>
                                                <option value="Green">Green</option>
                                                <option value="Maroon">Maroon</option>
                                            </select>
                                            <input type="text" readonly id="txtmanuid" class="form-control input-sm" >
                                        </td>
                                        <td class="pull-left">
                                            <button type="button" id="btnalloctomanu" name="btnalloctomanu" class="btn btn-primary form-control btn-sm">Save</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td class="text-center">Bag 3</td>
                                        <td>3000.00</td>
                                        <td class="text-center">2</td>
                                        <td class="text-center">6000.00</td>
                                        <td class="text-center">
                                            <select id="ddlmanu3" name="ddlmanu[]" class="text-success form-control input-sm">
                                                <option selected disabled value="">-- Select Color --</option>
                                                <option value="Red">Red</option>
                                                <option value="Blue">Blue</option>
                                                <option value="Yellow">Yellow</option>
                                                <option value="Green">Green</option>
                                                <option value="Maroon">Maroon</option>
                                            </select>
                                            <input type="text" readonly id="txtmanuid" class="form-control input-sm" >
                                        </td>
                                        <td class="pull-left">
                                            <button type="button" id="btnalloctomanu" name="btnalloctomanu" class="btn btn-primary form-control btn-sm">Save</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
      <script>    //Dropdown change - Order Allocation Modal "ddlmanu"
        $(document).on("change","#ddlmanu",function() {
            var value = $(this).val();
            $(this).next().val(value);
        });
    </script>


What I am trying to achieve is when the user selects a text from the dropdown, it's value should be shown in the textbox below. Here what is happening is in the first row, dropdown works perfectly, on selection it's value is shown in the textbox. But when the second or third row dropdown is selected no value is showing in the textbox. Why? Where I am wrong.

In the last column there is a button. When the user after selecting the dropdown clicks on the button, that row should be saved in the database. I have not tried this but I think this can be done.

Please help ??

php jquery html5

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

Hire Dedicated PHP Developer

Looking to hire affordable yet experienced PHP developers? **[Hire Dedicated PHP Developer](https://hourlydeveloper.io/hire-dedicated-php-developer/ "Hire Dedicated PHP Developer")**, who can convert your idea to reality, within the stipulated...

How to Load XML data in jQuery UI autocomplete with PHP

You can load XML data if you have available. In this tutorial, I show how you can load XML file data in jQuery UI autocomplete using AJAX and PHP.

PHP Web Application Development Company

As a top **PHP Web Application Development Company in USA**[https://www.dataeximit.com/php-development-services/](https://www.dataeximit.com/php-development-services/ "https://www.dataeximit.com/php-development-services/"), we at Data EximIT have...

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...

How to use highchart in php with example

Here, i will let you know that how to use highchart in php application with example. Highchart provides feature to draw different type of charts.