JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix productsUL ui-droppable" style="min-height: 120px;">
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
                                            <div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
                                                <input name="ctl00$MainContent$rptProduct$ctl20$hfproductId" type="hidden" id="MainContent_rptProduct_hfproductId_20" class="hfproductId" value="C4BAB31E-F95F-4DEC-A13E-CC66D8C02851">
                                                <input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="12" style="display: none;">
                                                <h5 class="ui-widget-header truncate">Black Coffee Tall</h5>
                                            </div>
                                            <div class="click" style="text-align: center; width: 160px;">
                                                <a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
                                            </div>
                                        </li>
                                    
                                        <li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
                                            <div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
                                                <input name="ctl00$MainContent$rptProduct$ctl21$hfproductId" type="hidden" id="MainContent_rptProduct_hfproductId_21" class="hfproductId"...

JavaScript

$(document).ready(function(){
    $(function () {
            // There's the gallery and the trash
            var $gallery = $("#gallery"),
              $trash = $("#trash");

            // Let the gallery items be draggable
            $("li", $gallery).draggable({
                cancel: "a.ui-icon", // clicking an icon won't initiate dragging
                revert: "invalid", // when not dropped, the item will revert back to its initial position
                containment: "document",
                helper: "clone",
                cursor: "move"
            });

            $trash.droppable({
                accept: "#gallery > li",
                classes: {
                    "ui-droppable-active": "ui-state-highlight"
                },
                drop: function (event, ui) {
                    debugger;
                    selectproduct(ui.draggable);
                }
            });
            // Let the gallery be droppable as well, accepting items from the trash
            $gallery.droppable({
                accept: "#trash li",
                classes: {
                    "ui-droppable-active": "custom-state-active"
                },
                drop: function (event, ui) {
                    deleteproduct(ui.draggable);
                }
            });

            // Image deletion function
            var recycle_icon = "<div style='text-align: center; width: 160px;'><a href='link/to/recycle/script/when/we/have/js/off' title='Delete this product' class='ui-icon ui-icon-refresh'>Delete product</a></div>";
            function selectproduct($item) {
                $item.hide(function () {
                    var $list = $("ul", $trash).length ?
                      $("ul", $trash) :
                      $("<ul class='gallery ui-helper-reset grid'/>").appendTo($trash);

                    $item.find("a.ui-icon-trash").remove();
                    $item.append(recycle_icon).appendTo($list).show(function () {
             ...