Show/hide content of active row
<p>In a bootstrap+jquery web page I build tables with this structure:</p>

<pre><code>&lt;table class="table table-striped" id="mytable"
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;Id1&lt;/td&gt;&lt;td&gt;Description1&lt;/td&gt;
            &lt;td&gt;
                &lt;input type="text" name="quantity1" id="quantity1" class="hidden form-control"  /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Id2&lt;/td&gt;&lt;td&gt;Description2&lt;/td&gt;
            &lt;td&gt;
                &lt;input type="text" name="quantity2" id="quantity2" class="hidden form-control"  /&gt;
            &lt;/td&gt;
        &lt;/tr&gt;       
        &lt;!-- ...and so on --&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>I want to show the input quantityN only if the row is active and keep the rest hidden.</p>

<p>I have this javascript to activate/deactivate rows:</p>

<pre><code>$(document).ready(function() {
    $( "#mytable tbody" ).on( "click", "tr", function() {
        $(this).addClass('active').siblings().removeClass('active');
        // Here show/hide row inner input fields
    });
});
</code></pre>

<p>What should I do to hide/show inner 'input' for the active row? Not sure how to refer to it.
Something like $(this) > td > input ??</p>