get closest input from select and place it in $.post

Question

Okay. please see bottom screenshot for illustration on frontend. What i'm trying to do here is when the user makes a selection in the select form ie: selects Received, I want to get the value of the inputbox directly on the bottom of the select form and send it via $.post to another script in order for me to process it.

I can't seem to get the data pass over via $.post to read the value in the inputbox. Main focus should be at the $.post area. I tried using $('.order_item_id').val(); in my $.post data but i only get the value under the first inputbox regardless of whichever selectbox i make the selection from.

Here is the section of my javascript and php.

.js

$('.order_stat_sel').change(function(){
    var closest_div=$(this).closest('div.order_receipt');
    var closest_selectbox=$(this).closest('.order_stat_sel');       
    if($('.select_received:selected').length>0){
        if(confirm('Confirm Receipt of this item?')){
            $.post("/seller/buyer_cfm_receive.php",{order_item_id: $(this).closest('.order_item_id').val()}, function(data) {
                alert("Congrats, Order Item Completed" + data);
                closest_div.append('<p>Completed</p>');
                closest_selectbox.remove().fadeOut("slow");
            });
        }else{
            $('.order_stat_sel').val('p');
        }
    }
});

php

            if($this->orderstatuses[$item->order_status]!='received'){
                echo '<select class="order_stat_sel" name="order_status">';
                    echo '<option class="select_pending" value="'.$pendingitem_state[2].'">'.$pendingitem_state[3].'</option>';
                    echo '<option class="select_received" value="'.$enditem_state[2].'">'.$enditem_state[3].'</option>';            
                echo '</select>';
            }?>
            <form class="send_order_cfm_input">
                <input class="order_item_id" name="order_item_id" value="<?php echo $item->virtuemart_order_item_id;?>" type="text" readonly="readonly">
            </form>

Any help appreciated

Answer 1

.closest() finds the closest ancestor of the element, but you are actually searching for a descendant of a neighbour:

$.post("/seller/buyer_cfm_receive.php",
    {
        order_item_id:$(this)
                      .next(".send_order_cfm_input")
                      .find('.order_item_id').val()
    },
    function() {
        /*...*/
    }
);