How to repeat jQuery request for each wp_query result

I am running queries in WordPress that should return a customer’s three most recent orders. When a user clicks on the “Change” button, it should open an order form with a “Save” and “Cancel” button.

My jQuery is only working on the first result of the query. When I click the “Change” button on the second and third entries, nothing happens.

I’ve tried doing a loop on the jQuery, but it still only applies to the first result, so I am thinking I need to attach a variable unique ID to "order_form" or request the jQuery to run three times.

Suggestions on what I should try?

function hgf_myhome_dash() {

foreach( array_combine( $menuid, $custom_field_data ) as $menuid => $custom_field_data ) {

    $user_menu = json_decode( stripcslashes( $custom_field_data ) );

// The button
    echo '<div id="change_button" style="float: left;">' .  do_shortcode('[button]Change this menu[/button]') . '</div>';


// The loop
    foreach( $user_menu as $single ){   
        if( $single->id ) { 
            echo get_post( $single->id )->post_title;
        }}

// The form
        echo '
            <div id="form_show" class="modal">
            <form id="order_form"  action="" method="POST">
            <div class="modal-content">

            <div class="col_title"><h3>'.__('Current Menu' ,'rm_domain').'</h3> 
            <input type="button" id="cancel_button" class="cancel_menu" value="Cancel" />
            <input type="submit" class="save_menu" style="" name="msubmit" id="msubmit" value="Save" />
            </div>

            I am text, hear me roar.

            </div>
            </form>
            </div>
            ';



    } 

}

And here is my jQuery:

jQuery(document).ready(function($){

$("#order_form").hide();

    $( function() {
        $( "#change_button" ).on( "click", function() {
                    $("#form_show").css('display', 'block');
             $("#order_form").show();
        });

        $( "#cancel_button" ).on( "click", function() {
                $("#form_show").css('display', 'none');
             $("#order_form").hide();
        });

      } );

}); 

Read more here: How to repeat jQuery request for each wp_query result

Leave a Reply

Your email address will not be published. Required fields are marked *