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('

Change this menu

‘) . ‘</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” />

I am text, hear me roar.




And here is my jQuery:



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

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

      } );


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


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: