How to get current selected option value from dynamic dropdown option?
<p>I have following dynamic drop down select tag : </p>

<pre><code>&lt;select name="order_accept" class="select_class order_accept"&gt; 

&lt;option value=''&gt;Choose Option&lt;/option&gt;

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

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

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

&lt;/select&gt;   
</code></pre>

<p>Now for e.g It's showing these select option 4 times. </p>

<p>I want to call ajax with selected <code>data-poid</code> value. So that I am using following jQuery : </p>

<pre><code>&lt;script type="text/javascript"&gt;
$('.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 = &lt;?php echo "'".generate_Form_Token('order_accept')."';"; ?&gt;
            $.ajax({
                url : &lt;?php echo "'".SITE_URL."'"; ?&gt; + '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);
                }   
            });               
        });
    });
&lt;/script&gt;
</code></pre>

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

<p>I want to get current selected <code>data-poid</code> value !</p>

<p>Update :</p>

<p>Each dropdown select option is look like this : </p>

<p><a href="https://i.stack.imgur.com/weihO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/weihO.png" alt="enter image description here"></a></p>