title: Manipulating the cloning function
body: <p>This lines of code displayes textbox and subject name for the category selected by user:</p>
  
  <pre><code>for (i = 0; i &lt; globalStore.data.length; i++) {
          //alert(globalStore.data[i].catname);  
          $("#sub").append("&lt;div class='sub row clone_this' id='"+globalStore.data[i].subid+"' &gt;&lt;div class='small-5 medium-3 large-3 columns'&gt;&lt;input type='text' onfocusout='getText("+globalStore.data[i].subid+")' class='text_"+globalStore.data[i].subid+"' placeholder='RM'&gt;&lt;/div&gt;&lt;div class='small-7 medium-9 large-9 columns'&gt;"+globalStore.data[i].subname+"&lt;/div&gt;&lt;/div&gt;");
       }
  </code></pre>
  
  <p>I want to allow user to specify price for each subject of their choice. Then 'onfocusout' that particular row should move to the top. I achived this by using the clone() function. 
  However I want some modification done after clone to the cloned element as well as the original element that was cloned from.</p>
  
  <p>Cloned item: The textbox must be replaced with  tag. Meaning, instead of  a textbox showing the value keyed in by user, it outght to show a link of the value keyed in instead followed by a delete/remove icon beside each subject name.</p>
  
  <p>And to the original element that was cloned from, should hide itself/remove.WHne the remove/delete link clicked in the above moved cloned item, then this would appear back.</p>
  
  <p>current problems are: </p>
  
  <p>1) when clicked on remove link, it removes the item and refreshes the page.How to prevent it from reloading?</p>
  
  <p>2) Top few rows of subjects are not cloning. Not sure why</p>
  
  <p>Clone function</p>
  
  <pre><code>function getText(param)
  {
    $("div.clone_this#"+param).clone(true, true).append("&lt;a href='' onclick=removeThis('"+param+"')&gt;remove&lt;/a&gt;").insertBefore("#sub");
  }
  function removeThis(param)
  {
      $("div.clone_this#"+param).remove();
  }
  </code></pre>