How to get current selected option value from dynamic dropdown option?

Question

I have following dynamic drop down select tag :

<select name="order_accept" class="select_class order_accept"> 

<option value=''>Choose Option</option>

<option data-toggle="modal" data-target="#myModal" value="0" data-poid="<?php echo $po_id; ?>" <?php if($order_status
 == 0) echo 'selected = "selected"'; ?>>In Process</option>

<option data-toggle="modal" data-target="#myModal" value="2" data-poid="<?php echo $po_id; ?>" <?php if($order_status
 == 2) echo 'selected = "selected"'; ?>><b>Yes, Completed</b></option>

<option data-toggle="modal" data-target="#myModal" value="3" data-poid="<?php echo $po_id; ?>" <?php if($order_status
 == 3) echo 'selected = "selected"'; ?>>Cancel Order</option>

</select>   

Now for e.g It's showing these select option 4 times.

I want to call ajax with selected data-poid value. So that I am using following jQuery :

<script type="text/javascript">
$('.order_accept').on('change', function() {
    $('#myModal').modal('show');
});
    $(document).ready(function(){          
        $("#yes").click(function(event) {            
            event.preventDefault();
            $('.order_accept_msg').show();
            var poid = $('.order_accept option:selected').data('poid');                        
            alert(poid);
            var oid = $('.order_accept').val();            

            var token = <?php echo "'".generate_Form_Token('order_accept')."';"; ?>
            $.ajax({
                url : <?php echo "'".SITE_URL."'"; ?> + 'order-accept',
                type : 'POST',
                dataType : 'html',
                data : {
                    'poid'  : poid,
                    'oid'   : oid,
                    '_token' : token,
                },     
                beforeSend : function () {
                    $('#yes').prop('disabled', true);                    
                },        
                success : function (result) {
                    $('.order_accept_msg').html(result);
                    $('.order_accept_msg').show(result);
                    setTimeout(function(){
                        $('#no').trigger("click");    
                        $('#yes').prop('disabled',  false);                        
                        $('.order_accept_msg').hide();
                    }, 3000);
                }   
            });               
        });
    });
</script>

Now If i select first drop down select option then it's getting right data-poid value and then if select another dropdown select option then it's getting first data-poid value !!

I want to get current selected data-poid value !

Update :

Each dropdown select option is look like this :

Answer 1

Using the class selector '.order_accept option:selected' will always return the first occurence, so you've to use a global variable to store the current select :

$(document).ready(function(){
    var current_select;

    $('.order_accept').on('change', function() {
        $('#myModal').modal('show');
        current_select = $(this);
    });
    $(document).ready(function(){          
        $("#yes").click(function(event) {            
            ...

            var poid = $('option:selected',current_select).data('poid');                        
            alert(poid);
        })
    })
})

Hope this helps.