title: Highlighting table cells when clicked
body: <p>I got this table. What I would like to do is when I  click a cell it should be highlighted, and with a second click the highlight should be cleared. and the second problem is I would like to highlight several cells one by one keeping the previous highlights on. The fiddle is here:<a href="http://jsfiddle.net/2Lu3ss9g/" rel="nofollow noreferrer">http://jsfiddle.net/2Lu3ss9g/</a></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>$(function() {
    $('td').click(function() {
      $(this).parents('table').find('td').each(function(index, element) {
        $(element).removeClass('on');
      });
      $(this).addClass('on');
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="color_changing" border="1" cellpadding="15"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;23&lt;/td&gt;
        &lt;td&gt;57&lt;/td&gt;
        &lt;td&gt;62&lt;/td&gt;
        &lt;td&gt;1162&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;112&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td&gt;162&lt;/td&gt;
        &lt;td&gt;88&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;77&lt;/td&gt;
        &lt;td&gt;62&lt;/td&gt;
        &lt;td&gt;199&lt;/td&gt;
        &lt;td&gt;211&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;57&lt;/td&gt;
        &lt;td&gt;64&lt;/td&gt;
        &lt;td&gt;144&lt;/td&gt;
        &lt;td&gt;9&lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>