title: drag, clone, and resize after drop with dynamic function in jquery
body: <p>the code below allows me to have 5 different items on a page, and then let me clone any item I drag to different area and allow me to drag the new clone item. However, when I try to move the clone item to different location, it again clone that item. what did i do wrong?</p>
  
  <pre><code>&lt;blockquote&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;jQuery UI Draggable - Default functionality&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
    &lt;style&gt;
    #draggable { width: 5px; height: 5px; padding: 0.5em; }
      .arrow h3 { text-align: center; margin: 0; }
    &lt;/style&gt;
    &lt;script&gt;
      function DragClone(id) {
          $('.' + id).draggable({helper: "clone"});
          $('.' + id).bind('dragstop', function(event, ui) {
              $(this).after($(ui.helper).clone().draggable());    
          });  
      }
  
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="test1" class="i1" onmousedown="DragClone('i1');"&gt;
    &lt;img src="img1"&gt;
  &lt;/div&gt;
  
  &lt;div id="test2" class="i2" onmousedown="DragClone('i2');"&gt;
    &lt;img src="img2"&gt;
  &lt;/div&gt;
  
  &lt;div id="test3" class="i3" onmousedown="DragClone('i3');"&gt;
    &lt;img src="img3"&gt;
  &lt;/div&gt;
  
  &lt;div id="test4" class="i4" onmousedown="DragClone('i4');"&gt;
    &lt;img src="img4"&gt;
  &lt;/div&gt;
  
  &lt;div id="test5" class="i5" onmousedown="DragClone('i5');"&gt;
    &lt;img src="img5"&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  &lt;/blockquote&gt;
  </code></pre>
  
  <p>if i do, it works fine but i do not want to create 5 the same function with just different class name.
          <blockquote>
      $(function() {
              $('.chaser').draggable({helper: "clone"});
              $('.chaser').bind('dragstop', function(event, ui) {
                  $(this).after($(ui.helper).clone().draggable());<br>
              });<br>
          });
      </blockquote></p>
  
  <p>so my main goal is to create one function and pass in the class name so it knows to clone that item only and only clone the original and not the clone. Then allow me to drag the item around and resize the new clone item. please advise. thank you</p>