title: How to replace class of removed span tag on button click
body: <p>Example of problem on jsfiddle:</p>
  
  <p><a href="https://jsfiddle.net/crduling/7kebg813/49/" rel="nofollow noreferrer">https://jsfiddle.net/crduling/7kebg813/49/</a></p>
  
  <p>I want to allow the user to click on text within a div. The text they click has the class of "highlights", which has a background-color of a gray-ish color on hover.</p>
  
  <pre><code>&lt;div class="article"&gt;
    &lt;span class="highlights"&gt;article text here&lt;/span&gt; &lt;!-- click this text --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>.highlights:hover {
      background-color: #D0D0D0;
      cursor: pointer;
  }
  </code></pre>
  
  <p>On the click of the text, the clicked text goes to another div, where the user can make a comment about the text they just highlighted (I didn't include the ability to comment on the text in this example for brevity). </p>
  
  <pre><code>&lt;div class="result-container"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>After the click, the "highlights" class is removed. They then have the option to either write a comment about the text they just highlighted or cancel the highlight. When they cancel the highlight in the other div, the text in the original div gets its class of "highlights" back using this code:</p>
  
  <pre><code>$("body").on("click", ".highlights", function() {
  
     let highlightedText = $(this).text();
  
    $(this).removeAttr("class");
  
    let newContent = 
    "&lt;div class='appendedDiv'&gt;"+
      "&lt;p&gt;"+highlightedText+"&lt;/p&gt;"+
      "&lt;button class='cancelResponses'&gt;Cancel&lt;/button&gt;"+
    "&lt;/div&gt;";
  
    let appended = $(newContent).appendTo(".result-container");
  
          $("body").on("click", ".cancelResponses", function() {
  
        let $text = $(".article");
        let textCurrent = $text.html().trim();
        let textToHighlight = highlightedText.trim();
        let ifTextExists = textCurrent.indexOf(textToHighlight) &gt; -1;
  
        if (ifTextExists) {
  
          textCurrent = textCurrent.replace(textToHighlight, "&lt;span class='highlights'&gt;"+textToHighlight+"&lt;/span&gt;");
          $text.html(textCurrent);
  
        }
  
        $(this).parent().remove();
  
      });
  
  });
  
  </code></pre>
  
  <p>I have gotten this far and it works. The problem is that, when the user clicks the original text they want to highlight too many times after canceling (3 times is when it starts to go wrong), multiple boxes start to append to the other div (<code>.result-container</code>) instead of just one being appended. This is due to the fact that <code>span</code>s are being nested within the original span that the user clicked, which now doesn't have the class of "highlights".
  My question is this:
  Is there a way that, when the user clicks the "cancel" button, the <code>span</code> that the "highlights" class was originally removed from just gets the class "highlight" back instead of nesting more <code>span</code>s inside of the original <code>span</code>?</p>