JSFiddle - React, Tailwind, and code Playground

HTML

<div id="conteiner">
    <div class="dragConteiner"><div id="draggable1" class="draggable"></div></div>
    <div class="dragConteiner"><div id="draggable2" class="draggable"></div></div>
    <div class="dragConteiner"><div id="draggable3" class="draggable"></div></div>
</div>

CSS

.draggable{
    height:50px;
    width:50px;
    background: green;    
}

.dragConteiner{
    height:50px;
    width:50px;
    margin-top:5px;    
}

#conteiner{
    margin-top:25px;
    margin-left:25px;
}

JavaScript

$(function(){
    
    $("#draggable1").draggable();
    $("#draggable2").draggable();
    $("#draggable3").draggable();
    $("#draggable2").on('mouseup',function(){
       alert('bye draggable!');
       $(this).draggable('destroy');
       //in case you like to use if after
       //$(this).hide();
       //as in your code
       $(this).remove();
    })
})