title: jQuery: Change the border color of ONE table cell
body: <p>I have a simple HTML table of options here:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;blue&lt;/td&gt;
      &lt;td&gt;green&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;red&lt;/td&gt;
      &lt;td&gt;cream&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The CSS with the relevant styles:</p>
  
  <pre><code>td { background-color: #FFF; border: 1px solid #3F3F3F; cursor: pointer; }
  td.selected { color: #D93A2C; border: 1px solid #D93A2C; }
  </code></pre>
  
  <p>Looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Rzzy6.png" alt="HTML Table"></p>
  
  <p>When I click on one of the table cells, I want the border and text to be red. So I use jQuery to toggle the '.selected' class using the following code.</p>
  
  <pre><code>$('td').each(function(){
      $(this).click(function(){
          $(this).toggleClass('selected');
      });
  });
  </code></pre>
  
  <p>However the result is this:
  <img src="https://i.stack.imgur.com/M206O.png" alt="HTML Table Cells Selected"></p>
  
  <p>The first table cell (blue) is the only one that looks as I want when selected. I need all the borders of the selected cell to be highlighted. </p>
  
  <p>Any ideas on how to achieve this? I'm not opposed to ditching tables if someone can suggest a better way.</p>