JSFiddle - React, Tailwind, and code Playground

HTML

<p>i want click event don't have any effect on below square after it's dragged.  </p>
<div class="div">
  <p id="remove" style="color: black">
  bolo
  </p>
</div>

<div class="droppable">

</div>

CSS

div{
    background-color:pink;
    width:60px;
    height:60px;
}
.orange{
    background-color:orange;
}
.droppable{
    background-color:white;

height: 100px;
  width: 100px;
}

JavaScript

$(function(){
    $('div').click(function(){
        $(this).toggleClass('orange');
    });
    
    $('#remove').click(function(){
    $(this).hide();
    })
    
    $('div').draggable();
    
    $('droppable').droppable({  accept: ".draggable",
        drop: function (event, ui) {
        $alert("dropped");
        
        }
        })
});