如何提交带有多个“提交”按钮的表单？ （菜单前端）

Question

I was not sure how to word the title.. if anyone has suggestions to improve, please let me know.

Normally when you create an HTML, CSS & PHP form.. there is a designated 'submit' button (or maybe 2 even)....

What I am building here is more of a 'menu' front end.. where all of the displayed options have their own 'order' button.

Once the 'order' button is clicked...the form should submit to itself.. and the PHP parsing does it 'thing'...

I am not clear on the proper way to go about this?

Do I just use some jQuery to add some code to each 'order' button to submit the page?

Each 'item' in the menu should have its own unique value associated with it.... but since it is NOT a real form with input fields or checkbox/radio buttons.. I'm not clear on how best to 'capture' this data either?

SO to summarize:

1.) How to best submit a form/page to itself when there is no SINGLE/DEDICATED submit button.. and each item displayed can 'submit' by itself? (jQuery to add events to each 'order' button?)

2.) Since I'm not technically posting any data (currently) how best to add and carry over this unique data upon page/form submission (ie: $_POST[] ?) (Add this unique data to the 'order' button that will be used to submit?

UPDATE: I guess since 'code' is being requested.. (and I understand that questions should be a this way or that way type of answer).. but it is 'working'' (and that wasnt the issue.. it was what is best practice)..

Here is what I am doing to output all the available drinks returned from the query: (basically each button ID is the unique drink 'recipe' that I set as the hidden field before submitting the form)

<form id="drinkForm" name="drinkForm" method="post" action="<?=$redirectUrl?>?mode=submit">

    <!-- hidden field to hold recipe chosen -->
    <input type="hidden" name="selectedDrink" id="selectedDrink" value="" />

    <?
    for($i=0; $i<count($drinkList); $i++){
        //drink image
        $ingredientList = '';
        $drinkImage = 'images' . $drinkList[$i]['drink_image'];                                                    
        if(!file_exists($drinkImage)){                                                     
            $drinkImage = 'images/no_image.jpg'; 
        }
        ?>                                                           
        <div class="drinkListing">
            <div class="imageContainer"><img src="<?=$drinkImage?>"></div>

            <div class="drinkDetails"> 
                <!-- drink title -->
                <div class="drinkTitle"><?=$drinkList[$i]['drink_name'] . '('. $drinkList[$i]['drink_id'] .')'?></div>              
                <!-- generate drink recipe to be sent on $_POST[''] -->
                <?
                for($x=1; $x<=15; $x++){
                    //check for empty ingredient (end of recipe)
                    if($drinkList[$i]['ingredient_'.$x.'_dispenser'] != ''){
                        //dispenser type
                        if($drinkList[$i]['ingredient_'.$x.'_dispenser'] == 'bottle'){
                            $ingredientList .= 'b=';
                        }else{
                            $ingredientList .= 'v=';
                        }
                        //dispenser
                        $ingredientList .= $drinkList[$i]['ingredient_'.$x.'_dispenser_order'] . ':';
                        //dosage
                        $ingredientList .= $drinkList[$i]['ingredient_'.$x.'_dosage'] . ',';

                    }else{
                        //remove trailing comma in ingredient list
                        //$ingredientList = rtrim($ingredientList, ','); //removes all commas
                        $ingredientList = trim($ingredientList,",");
                        break;
                    }
                }
                ?> 
                <!-- submit buttons -->
                <div class="buttonContainer">
                    <button class="orderButton" id="<?=$ingredientList?>" type="button">Order</button>                                      
                </div>              
                <!-- drink description -->
                <div class="drinkDesc"><?=$drinkList[$i]['drink_desc']?></div>

                <p><?=$ingredientList?></p>
            </div>                                                                   
        </div>                                                                   
    <?
    }
    ?>
</form> 

and for the jQuery

$('.orderButton').click(function() {        
        console.log("button clicked");
        var targetRecipe = $(this).attr('id'); //(this.id) or alert($(this).attr('id'));
        $('#selectedDrink').val(targetRecipe);
        $('#drinkForm').submit();
    });

My question is.. is this best practice? Or is I guess more so.. is this a 'bad' (not approved) approach?