title: How to remove red line under words after click in my off element?
body: <p>my English language is not good.sorry </p>
  
  <p>How to reload text area after click "off" element (After clicking on the "On") for remove red line under words.</p>
  
  <p>thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $('textarea').focus();
  
    $(".on").click(function() {
      $('textarea').attr('spellcheck','true');
      $('textarea').focus();
    });
  
    $(".off").click(function() {
      $('textarea').attr('spellcheck','false');
      $('textarea').focus();
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.on {
    background-color:green;
    color:white;
    padding:5px;
    margin:10px;
    float:left;
    cursor:pointer
  }
  .off {
    background-color:red;
    color:white;
    padding:5px;
    margin:10px;
    float:left;
    cursor:pointer
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;textarea&gt;sadasarwedfhtfuf&lt;/textarea&gt;&lt;br&gt;
  
  &lt;a class="on"&gt;Red Line On&lt;/a&gt;
  &lt;a class="off"&gt;Red Line Off&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>