title: jquery add class on input click and remove class when click other input
body: <p>I need to add a class to the input wrapper when I click on input, and remove the class when other input is clicked.</p>
  
  <p>I've tiyed toggleClass but it would only remove the class when the same input is clicked again.</p>
  
  <p>I've tried to use functions: find() and closest() but cannot figure exactly which one I need, or in what order they shoudl be called... Any help would be appreciated.</p>
  
  <p>So far here is the code:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;label for="name" class="required"&gt;
          name
      &lt;/label&gt;
      &lt;div class="data_area"&gt;
          &lt;input type="text" id="" name="" value="" title="" class="" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
      &lt;label for="other name" class="required"&gt;
          last name
      &lt;/label&gt;
      &lt;div class="data_area"&gt;
          &lt;input type="text" id="" name="" value="" title="" class="" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
      $('.wrapper input').click(function () {
          $(this).parent().addClass('red');
      });
  &lt;/script&gt;
  
  &lt;style&gt;
  .red {background:red;}
  &lt;/style&gt;
  </code></pre>