title: jquery select all elements of class except the one that called the function
body: <p>A variable number of divs are created from a data source. Inside each div there is an image acting as a button, and another div containing text, etc. While the actual use case is somewhat more complicated, we can use a simplfied version here:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="content_block_1" class="content_block"&gt;
          &lt;img id="content_block_button_1" class="content_block_button" src="images/1.png"&gt;
          &lt;div id="content_block_textfield_1" class="content_block_textfield&gt;
              This is text.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="content_block_2" class="content_block"&gt;
          &lt;img id="content_block_button_2" class="content_block_button" src="images/2.png"&gt;
          &lt;div id="content_block_textfield_2" class="content_block_textfield&gt;
              This is more text.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="content_block_3" class="content_block"&gt;
          &lt;img id="content_block_button_3" class="content_block_button" src="images/3.png"&gt;
          &lt;div id="content_block_textfield_3" class="content_block_textfield&gt;
              This is even more text.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>By clicking on the images, users shall be able to turn the background color of the associated textfield yellow. If the textfield already is yellow, it shall have the background sete back to normal. If you turn on the yellow highlight for one textfield while any other textfield alsready is highlighted, it should remove those highlights and only activate the new one.</p>
  
  <p>I know of the toggle() function to add/remove the .highlight css class. This is a very unelegant and unflexible function I came up with to handle this:</p>
  
  <pre><code>//1st
  $('#content_block_button_1').click(function () {
      //toggle the corresponding 
      $('#content_block_textfield_1').toggleClass('highlight');
      //reset all other highlights
      $('#content_block_textfield_2, #content_block_textfield_3').removeClass('highlight');
      console.log("toggled highlight 1");
  });
  
  //2nd
  $('#content_block_button_2').click(function () {
      //toggle the corresponding 
      $('#content_block_textfield_2').toggleClass('highlight');
      //reset all other highlights
      $('#content_block_textfield_1, #content_block_textfield_3').removeClass('highlight');
      console.log("toggled highlight 2");
  });
  
  //3rd
  $('#content_block_button_3').click(function () {
      //toggle the corresponding 
      $('#content_block_textfield_3').toggleClass('highlight');
      //reset all other highlights
      $('#content_block_textfield_1, #content_block_textfield_2').removeClass('highlight');
      console.log("toggled highlight 3");
  });
  </code></pre>
  
  <p>I think we can all agree that this is not very elegant, effective code. And it does not scale well at all.</p>
  
  <p>I'd like to take advantage of the fact that the button and the textfield elements are nested within the same "parent". And I'd like to find a way to do a "remove .highlight from all textfield elements EXCEPT for the one that is the "sibling" the button element calling the function. I hope that by not relying on ids, the function then would work with 3, 10 or 100 content_block divs...</p>
  
  <p>Can anyone point me in the right direction, please?</p>