JQuery: using closest and find functions to show hidden div
<p>Initially all smart-suggestion divs are hidden. I am trying to show the the 'smart-suggestions' div belonging to the closest 'prod-name-container' div that the user clicked on. I tried using closest() and find(), but it did not work and I am not sure why it isn't working.</p>

<p>Markup</p>

<pre><code>              for($i=0; $i &lt; 20; $i++){
                    echo '
                    &lt;div class="invoice-line"&gt;
                        &lt;div class="index"&gt;'.($i+1).'&lt;/div&gt;
                        &lt;div class="prod-id"&gt;&lt;input type="text" id="prod-id"&gt;&lt;/div&gt;
                        &lt;div class="prod-name-container"&gt;
                           &lt;input onKeyPress="search(this.value)" type="text" class="prod-name"/&gt;
                           &lt;div class="smart-suggestions"&gt;
                                &lt;!-- RESULT SUGGESTIONS WILL POPULATE HERE --&gt;
                           &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="qty"&gt;1&lt;/div&gt;
                    &lt;/div&gt;';
                }
</code></pre>

<p>JQuery</p>

<pre><code>   $('.smart-suggestions').hide();
   $('.prod-name').focus(function() {
        $last = $(this);
        $('.invoice-line').closest(".prod-name-container").find('.smart-suggestions').show();
    });
</code></pre>
