title: Unselect unknown selectable
body: <p>I have a table thats devided logically in 2 halves. I will have to select only half of a row as in the image.
  <img src="https://i.stack.imgur.com/iYl0g.png" alt="enter image description here"></p>
  
  <p>Now if I choose a different "half" row, I need to deselect the previous one. How would I do that? My code is here:</p>
  
  <pre><code>&lt;tr class="line1"&gt;
      &lt;td width="10" class="td3523" onclick="selectme('3523');"&gt;
          &lt;input type="radio" name="selattendance" id="tr3523" onClick="setEditDelete(3523)"/&gt;
      &lt;/td&gt;
      &lt;td width="100" class="td3523" onclick="selectme('3523');"&gt;2012-11-19&lt;/td&gt;
      &lt;td width="125" class="td3523" onclick="selectme('3523');"&gt;
          &lt;table width="100%" cellpadding="0" cellspacing="0" style="border: 0;padding: 0;border-collapse: collapse"&gt;
              &lt;tr&gt; 
                  &lt;td style="width: 50%;padding-right: 10px;border: 0" align="right" valign="middle"&gt;22:54&lt;/td&gt;
                  &lt;td style="width: 20%;border: 0"&gt;     &lt;a href="#" onclick="loadPic('attendanceimages/39286a0a6b45cae9f116b11882f36046.jpg','2012-11-19','2012-11-19','add','','In','22:54:04','22:54:04');"&gt;&lt;img src="images/punchimg.png"&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td style="width: 20%;border: 0"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>When I click on any <code>td</code>, all <code>td</code>s with the same ID get selected using this code:</p>
  
  <pre><code>function selectme(id) {
      $('.td' + id).toggleClass("ui-selected");
  }
  </code></pre>
  
  <p>I guess I need to put another line removing this class from previously selected <code>td</code>s. How would I do that? Thanks.</p>