title: jQuery add text between a href tags of td
body: <p>I have a table of links, these links can be deleted from the table and I can drag and drop the table rows into another div. Once dropped into the div, I disable the table row so it cannot be dragged again and I also remove the link that allows the row from being deleted from the table.</p>
  
  <p>This all works fine. Once in the dropped div, I add a link (font awesome X icon) which allows the item/row to be deleted from the dropped area. </p>
  
  <p>So when the delete link is clicked in the dropped area, the row is deleted and the coorresponding row in the main table is enabled for dragging again.</p>
  
  <p>This all works fine. The only part that is not working is adding back the link to the row in the table. When I initially drag the row from the main table the font awesome icon (<code>fa-times</code>) is removed from the table row, then when the row is deleted from the dropped area, I try to add the icon back to the main table row but no good.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped"&gt;
          &lt;thead&gt;
              &lt;tr class="bb"&gt;
                  &lt;th class="artcl_hdr text-center"&gt;&lt;/th&gt;
                  &lt;th class="artcl_hdr text-center"&gt;Source&lt;/th&gt;
                  &lt;th class="artcl_hdr text-center"&gt;Title&lt;/th&gt;
                  &lt;th class="artcl_hdr text-center"&gt;Publish Date&lt;/th&gt;
                  &lt;th class="artcl_hdr text-center"&gt;Share&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;?php
              if(is_array($bookmarks))
              {
                      echo '&lt;tr class="bmkitem" id="'.$bookmark['aid'].'"&gt;';
                      echo '&lt;td class="text-center bkgcol-white"&gt;&lt;a href="#" title="Delete bookmark" id="bkm_delete"&gt;&lt;i class="fa fa-times fa-lg pomegranate" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;';
                      echo '&lt;td class="text-center"&gt;&lt;span id="article_source" class="label '.$label.'"&gt;'.$bookmark['name'].'&lt;/span&gt;&lt;/td&gt;';
                      echo '&lt;td class="bkm-title text-left"&gt;&lt;a href="'.$bookmark['link'].'" target="_blank" id="bookmark-link"&gt;'.$bookmark['title'].'&lt;/a&gt;&lt;/td&gt;';
                      echo '&lt;td class="key-title text-center"&gt;'.$formatted_date.'&lt;/td&gt;';
                      echo '&lt;td class="artcl_info text-left"&gt;&lt;div class="add-this addthis_native_toolbox" data-url="'.$bookmark['link'].'" data-title="'.$bookmark['title'].'"&gt;&lt;/div&gt;&lt;/td&gt;';
                      echo '&lt;/tr&gt;';
                  }
              }
              ?&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="panel-body text-left" id="bkm-dropbox"&gt;
      &lt;div class="text-center"&gt;
          &lt;p class="temp-text"&gt;Drag Bookmarks Here&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
  
      $(".bmkitem").draggable({
          helper: "clone",
          containment: "document",
          cursor: 'move',
          revert: 'true',
          start: function(event, ui) {
              source = $(this).find('#article_source').text()
              contents = $(this).find('#bookmark-link').text();
          }
      });
  
      $('#bkm-dropbox').droppable({
          hoverClass: 'hover',
          acceptable: '.bmkitem',
          containment: 'document',
  
          out: function (event, ui) {
              var self = ui;
              ui.helper.off('mouseup').on('mouseup', function () {
                  $(this).remove();
                  self.draggable.remove();
              });
          },
  
          drop: function(event, ui) {
              $(this).find(".temp-text").remove();
  
              $(this).append('&lt;span&gt;&lt;a href="Javascript:void(0)"" id="drop_delete"&gt;&lt;i class="fa fa-times fa-lg pomegranate left_pad_push" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;' + source + ' - ' + contents + '&lt;/span&gt;&lt;br /&gt;');
              ui.draggable.draggable("disable");
              ui.draggable.find("i").remove();
  
              $('#drop_delete').on('click', function () {
                  $(this).parent('span').remove();
                  ui.draggable.draggable("enable");
                  ui.draggable.find("td#bmk_delete").text('&lt;i class="fa fa-times fa-lg pomegranate" aria-hidden="true"&gt;&lt;/i&gt;');
              });
          }
      });
  });
  </code></pre>