Octobercms Component Unique id (Twig & Javascript)

I need to have unique IDs to duplicate the component I know how to set the unique id in the default.htm for my component

{% set uid = '{{__SELF__.id}}' %}

but I don't know how link it with my JavaScript... I've tried several ways but I still can't get it right

1) default.htm

<div id="tab" data-id="{{__SELF__.id}}" class="draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">

        <div id="tab-label"></div>
        <div id="tab-expand" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

this is my js

$(function() {
                    $( "#tab" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

there's an error says "Uncaught TypeError: $(...).data(...).draggable is not a function"

2) default.htm

<div id="tab{{__SELF__.id}}" class="draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">

        <div id="tab-label"></div>
        <div id="tab-expand" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

this is my js

$(function() {
                    $( "#tab{{__SELF__.id}}" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

3) default.htm

{% set uid = '{{__SELF__.id}}' %}

<div id="tab" class="draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">

        <div id="tab-label"></div>
        <div id="tab-expand" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

this is my js

var tab_{{uid}} = $(function() {
                    $( "#tab" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

window[tab_{{uid}}]();

can someone pls show me how to do it?

$("#x") return a jQuery Objet which have x as id.
$("#x").data("y") return the value of the tag data-y in the jQuery Objet which have x as id.
draggable() can't apply to a value.

So try something like this:

<div id="tab{{__SELF__.id}}" class="my-tab draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">

        <div id="tab-label"></div>
        <div id="tab-expand" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

and

$(function() {
    $(".my-tab").draggable({ 
        axis: "y", 
        containment: "window"
        });
});

You can use each() function like this:

$(".my-tab").each(function(){
    var myId = $(this).attr('id');
    // Do Something with your unique Id
    $(this).draggable({ 
            axis: "y", 
            containment: "window"
    });
});