The click event is working for all the view button

I am displaying the list of the records on the screen with buttons as showing on the image below.

Now I am displaying the employee_id on the popup, So the admin will click on the view button and popup will display with the employee id.

but my issue is, I am getting the all the employee list in the popup on click on view button. why this issue because I view button in the loop.

      <td><a href="javascript:void(0);" id="open_popup">View</a>

and my script is here

$(document).ready(function(){
              $("a#open_popup").click(function(){
                    $(".popup").show();  
               });  
 });

So when I click on any of the view buttons it's displaying all the employee details in the popup and I have to display the single user id.

<?php if (!empty($get_emp_records)) {?>
<table class="table " >  
        <thead>
         <tr>  
          <th>Employee Name</th> 
           <th>Designation</th>  
           <th>Role</th>  
           <th>Status</th>  
           <th>Action</th>               
         </tr> 
          </thead>
         <?php  
         foreach ($get_emp_records as $row)  
         { $encryption_id=$this->encryption->encrypt($row->id);//encrpt the id ?>
            <tbody>
            <tr>   
            <td><?php echo $row->firstname;  echo $row->lastname;?></td>
            <td><?php echo $row->designation;?></td>  
            <td><?php echo $row->access_role;?></td>
            <?php if ($row->is_approved == 1): ?>
            <td><a href="javascript:void(0)">Approved</a></td>
            <?php else: ?>
            <td><a  href="#">Pending</a></td>
          <?php endif; ?>
          <td><a href="javascript:void(0);" id="open_popup">View</a> 
            <a href="<?php echo site_url('Employee_control/employee_archive?key='.$encryption_id)?>">Archive</a>
          </td>  

          <div class="popup"  style="display: none;">
            <p><?php echo $row->employee_id;?></p>
          </div>
            </tr>   
          </tbody> 
         <?php }       
         ?>              
   </table>  
<?php }else{echo "No record found";}?>

Hope this will help you :

Add a function openPopup on onclick event at view anchor like this

<td>
   <a onclick="openPopup(this)" data-id="<?=$row->id;?>">View</a>
   ........ 
</td>

Provide id to your popup div like this :

<div id="popup-<?=$row->id;?>"  style="display: none;">
   <p><?php echo $row->employee_id;?></p>
</div>

Your js function openPopup should be like this :

<script type="text/javascript">

function openPopup(obj) 
{
    var id = $(obj).data('id');
    $("#popup-"+id).show();  
}

function closePopup(obj) 
{ 
   var id = $(obj).data('id'); 
   $("#popup-"+id).hide(); 
}; 
</script>