title: jquery toggle text on row click in first td or div
body: <p>I'm trying to toggle text in the first <code>&lt;td&gt;</code> in a table for every clicked row. What I have found on the internet before is working but a bit weird (because I mixed few examples to get what I want).</p>
  
  <p>Giving example:</p>
  
  <pre><code>&lt;body&gt;
    &lt;table class='table table-bordered table-condensed table-striped table-hover'&gt;
      &lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Email&lt;/th&gt;&lt;th&gt;Country&lt;/th&gt;&lt;/tr&gt;
      &lt;tr class="table-row"&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Country&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="table-row"&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Country&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;script&gt;
  
      $('.table tbody tr').click( function () {
        var $this = $(this);
        var xText =  $this.text();
        $this.closest('tr').toggleClass('notUse use')
        $this.text(xText==="Yes"?"No":"Yes");
      });
  
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How can I toggle <code>&lt;td&gt;</code> text ( 'Yes' or 'No' ) in every single row on click? So far it's toggling well but moreover my function is removing necessary text in the next <code>&lt;td&gt;</code> ('Country'). I want to toggle only 'Yes'/'No' without removing text of next <code>&lt;td&gt;</code>.</p>