 <p>The issue here is: You are using your ID for the elements in a while-loop. So you end up having multiple IDs in your document, which is invalid. So jQuery will always get the first one.</p> <p>I would suggest the following:</p> <ul> <li>get rid of the inline <code>onClick</code>-handler and use a proper event-handler</li> <li>use a <code>class</code>- selector instead of ID</li> <li>save your <code>usrid</code>-value to the element your are clicking on</li> </ul> <p>Your code would be as follows:</p> <p><strong>HTML</strong></p> <pre><code>&lt;input type='text' class='hidden' name='usridl' id='usrid' value='".$staff_data['id']."' /&gt; &lt;a href='javascript:void(0);' class='delete-row' id='dltbutton' name='btn-dlt' data-usrid='".$staff_data['id']."'&gt;&lt;i class='fa fa-trash red'&gt;&lt;/i&gt;&lt;/a&gt; </code></pre> <p><strong>JS</strong></p> <pre><code>$('.delete-row').on('click', function(){ if(confirm("Do you really want to delete record ?")) { var usrid = $(this).data('usrid'); //all your other stuff } }); </code></pre> <hr> <p><strong><a href="https://jsfiddle.net/3cqxgyb1/" rel="nofollow">Example</a></strong></p>