title: find next instance of class from clicked table row
body: <p>trying to show a hidden element when clicking a table row. Each row has an instance of this element with the same class name but I only want to show the one on the same row that is clicked. Here is the html structure</p>
  
  <pre><code>&lt;table id="task-table"&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;&lt;span class="icons"&gt; i c o n &lt;/span&gt;3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;&lt;span class="icons"&gt; i c o n &lt;/span&gt;3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;&lt;span class="icons"&gt; i c o n &lt;/span&gt;3&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is jquery</p>
  
  <pre><code>  $('#task-table').on('click', 'tr', function() {
      $(this).next('.icons').show('fast');
    });
  </code></pre>
  
  <p>What am I doing wrong can anyone assist?</p>