jquery - submit dynamically generated button

Question

I have a dynamic form where the data is being pulled through database and i want to send indivisual hidden data field by clicking the button to database through ajax.

Everytime i click the button only the first button works other button don't work.

I'm using ajax because i want to add individual data to the database without refreshing the page.

<div class="topheader">
    <div class="container">
        <div class="row">
            <div class="header-wrap">
                <span class="header-phone"><i class="fas fa-utensils"></i>{{$clients->name}}</span>
                <span class="header-phone"><i class="fas fa-phone"></i> {{$clients->phone_number}}</span>
            </div>
        </div>
    </div>
</div>

<div id="menutabs" class="component-box res-features">
    <!--Scrollable tab example -->
    <div class="pmd-card pmd-z-depth container">
        <div class="pmd-tabs pmd-tabs-bg row" scroll="true">
            <ul class="nav nav-tabs" role="tablist">
                @foreach($categories as $category)

                    <li role="presentation" class="active"><a href="#{{$category->slug}}" aria-controls="home"
                                                              role="tab"
                                                              data-toggle="tab">
                            <p>{{$category->name}}</p></a></li>
            @endforeach

        </div>

    </div> <!--Scrollable tab example end-->

</div>

<!-- SECTION 1 -->
<div id="menutabcontent" class="home-section home-section-21">
    <div class="container">
        <div class="row">
            <div class="pmd-card-body">
                <div class="tab-content">
                    <?php
                    $active = 'active';
                    ?>
                    @foreach($categories as $category)
                        <div role="tabpanel" class="tab-pane {{$active}}" id="{{$category->slug}}">
                            <div class="card-group">

                                @foreach($category->menus as $menu)
                                    <div class="card mb-3 ">
                                        <div class="row g-0">
                                            <div class="col-md-4">
                                                <img src="http://restorma.abgroup/uploads/demo/dish/{{$menu->image}}"

                                                     alt="..." width="120px" height="120px">
                                            </div>
                                            <div class="col-md-8">
                                                <div class="card-body">
                                                    <h5 class="card-title">{{$menu->name}}</h5>
                                                    <p class="card-text">{{$menu->description}}</p>
                                                    <p class="card-text"><small
                                                                class="text-muted">RS. {{$menu->price}}</small>
                                                    </p>
                                                    <form class="form" id="order">
                                                        <input type="hidden" id="table_id" name="table_id" value="0">
                                                        <input type="hidden" id="dish_item_id" name="dish_item_id" value="{{$menu->id}}">
                                                        <input type="hidden" id="particular" name="particular" value="{{$menu->name}}">
                                                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                                                        <button type="button" class="btn btn-primary" id="btn-order" name="btn-order"
                                                                value="add">Order
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php
                                    $active = '';
                                    ?>
                                @endforeach
                            </div>
                        </div>

                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<script src='/theme-assets/website/js/jquery.js'></script>
<script>
    jQuery(document).ready(function (){
        jQuery('#btn-order').click(function(e){

            e.preventDefault();
            jQuery.ajax({
                url: "{{ url('#') }}",
                method: 'post',
                data: {
                    _token: jQuery('#_token').val(),

                    table_id: jQuery("input[name=table_id]").val(),
                    dish_item_id: jQuery("input[name=dish_item_id]").val(),
                    particular: jQuery("input[name=particular]").val(),

                    /*table_id: jQuery('#table_id').val(),
                    dish_item_id: jQuery('#dish_item_id').val(),
                    particular: jQuery('#particular').val(),*/


                },
                success: function(result){
                    //console.log(result);
                    //jQuery('.alert').show();
                    //jQuery('.alert').html(result.success);
                    window.alert(result.success);

                }});
        });
    });

</script>

Answer 1

You are assigning id to fields in loop. For every item in the loop, same id will be assigned which is not ideal because there should be only one id per page.

I cannot give perfect syntax but I can give you an idea.

You can assign onclick function to the button in the loop like:

<button type="button" class="btn btn-primary"  
 onclick="AddOrderFunc(name, description,price)" value="add">Order</button>    
               //Add parameters in function which you want to send

And in Javascript you can add function like:

    function AddOrderFunc(name, description,price){
jQuery.ajax({
                url: "{{ url('#') }}",
                method: 'post',
                data: {
                   name:name,
                    description:description,
                   price:price
                },
                success: function(result){
                    //console.log(result);
                    //jQuery('.alert').show();
                    //jQuery('.alert').html(result.success);
                    window.alert(result.success);

                }});
        });
}