How to avoid duplicate clones in drag and drop

How to avoid duplicate clones in drag and drop

I am doing a simple project using Jquery UI. The program is similar to shopping cart where you drag items from one container/table list to another. I am almost there but I could not figure how to avoid duplicates on second container.

For example, I dragged item A from left to right. I can dragged that item A and it makes clone forever on the second container. I just want one clone of item A in second container. If the user tries to drag item A to second container where clone of item A is already present, then is should revert.


thanks in advance.


here are my codes:

jquery

$(document).ready(function(){
    $("h1").click(function(){
         $("#emp_list").slideToggle("500");});
  

       $("#emp_list li").draggable(
        { helper: "clone", revert: 'invalid', opacity: "0.5"});
   
   
    

$("#Potential_Assignee").droppable(
       {
         var x = ui.draggable
         accept: (function(){
        

         return $("#emp_list li",
         hoverClass: "dropHover",
         drop: function(ev, ui) {
           $( this ).find( ".replace_me" ).remove();
  $("<li></li>").text(ui.draggable.text()).appendTo(this)
  .addClass("newClass");
         }      
       })
  
});


html:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel = "stylesheet" type="text/css" href="css_t2.css">
  <title>Task Assignment</title>

 <link rel="stylesheet" href=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css " />

 <script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script >

  <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script >
 
  <script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script >

  <link rel="stylesheet"href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

  <script type="text/javascript" src="jquery_t2.js"> </script>
</head>


<body>
  <div id="employee">
      <h1 class="result_header"><a href = "#">Employees</a></h1>
      <div id="emp_list">
        <ul>
            <li data-id="1">itemA</li>
            <li data-id="2">itemB</li>
            <li data-id="3">itemC </li>
            <li data-id="3">itemD</li>
            <li data-id="4">itemE </li>
            <li data-id="5">itemF</li>
            <li data-id="6">itemG </li>
          </ul>
       </div>
  </div>

  <div id="Potential_Assignee">
        <h1 class="result_header">Assignee</h1>
        <div class="content">
          <ol>
             <li class="replace_me">Drag the names</li>
          </ol>
        </div>
  </div>
  
</body>
</html>

CSS

#employee { float:left;  border: 2px solid #000; width: 400px; margin-right: 2em; background: linen; }
#Potential_Assignee {float: left;
                     width: 400px;
       margin-top: 1 em;
             background:BlanchedAlmond;
      border: 2px solid #000;}


.result_header {border-style: double; border-radius: 1px; border-color: black;}

#emp_list {position: relative;}
a { text-decoration: none;
   color: black;}

.newClass {padding: 0 5px 5px 5px;  color: Red; list-style-position:inside;}
ol {list-style: none;
    opacity: 0.5;}