How can I make sure that same user shouldn't be added twice in jquery?

See more:

Javascript

jQuery

WordPress

I am using two div(s). In the first div, all the users are shown on a page, with "ADD" Button Option. By adding Users, they get added to the second div using jQuery. But I want to make sure they do not get added twice. I want to implement a condition to check if a user is already added, then it should not be added or button should be disabled. I am writing my html and css codes below. Actually I am doing this in wordpress but the problem is in jquery. I have page template named users.

/*
Template Name: Users
*/
?>

.container{
  width: 800px;
}
.left{
  float:left;
  width: 300px;
  background: ##66CDAA;
  border-right: thick-solid #fff;
}
.right{
  overflow: hidden;
  width: 500px;
  background: powderblue;
}

<?php
 get_header(); ?>
 <div id="primary" class="content-area">
   
   <div class="container">
   <div class="left" id="xyz">
     
       
         
         
         
       
     <?php
      $sql ="SELECT * FROM wp_users";
      $results = $wpdb->get_results($sql) or die(mysql_error());
      foreach( $results as $result ){ ?>
        
          
          
          
        
        <?php
          }
        ?>
        <table><tbody><tr><th>Name</th><th>Gravatar Image</th><th>Add to Div</th></tr><tr><td id="<?php echo $result->ID; ?>">
          <?php echo $result->display_name; ?>
          </td><td>
          <?php echo get_avatar( $result->user_email, 42); ?>
          </td><td>
          <p>Added</p>
          </td></tr></tbody></table>
 </div>
 <div class="right">
   <p>Added Users</p>
   
   
     
   
   <table class="table"><tbody><tr><th>Name</th><th>
     </th><th>Image</th></tr></tbody></table>
 </div>
 </div>



     </div>
    <?php get_footer(); ?>

What I have tried:

I have a jquery file using which I am adding user from first div to another. But the problem is that I want to check a condition before adding the user. If a user is already added then it should not be added again, instead a alert should be prompted that "user is already added". My code is below

(function($) {
      $(document).ready(function() {
      $(".submit").on("click", function(e){
      e.preventDefault();
      var id = $(this).data('id');
      var name = $(this).data('name');
      var image = $(this).data('image');

       if($('.table td#' + id).length) {
       //Also tried $('.table').find('td').attr('id'); but undefined is the result
         alert("added");
        } else {
          $('.table').append('' + name + '<br>');
      //  }
  })
})
})(jQuery);