How do I close the tab? (Octobercms Component, Javascript)
<p>htm</p>

<pre><code>&lt;div id="tab" name="{{__SELF__.id}}" class="my-tab"&gt;
    &lt;img id="tab-avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}"&gt;
    &lt;div id="tab-minimize"&gt;
        &lt;div id="tab-label"&gt;&lt;/div&gt;
        &lt;div id="tab-expand" name="{{__SELF__.id}}" class="tab-expand tab-btn"&gt;&lt;/div&gt;
        &lt;div id="tab-close" name="{{__SELF__.id}}" class="tab-close tab-btn"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JS</p>

<pre><code>$(function(){
    $(".tab-close").each(function(){
        var tabName = $(this).attr('name');
        $(this).click(function(){ 
            $(".my-tab").each(function(){
                $("tabName").addClass("hidden");
            }); 
        });
    });
}); 
</code></pre>

<p>Now I have two tabs(tabs which are duplicated), both have the same class name, id, etc. The only diff is they have their own unique name.</p>

<p>How to close the tab when I press the close button of the specific tab? </p>

<p>Meaning I want to click tab 1 close button to close tab 1 and click tab 2 close button to close tab 2.</p>