JSFiddle - React, Tailwind, and code Playground

HTML

<div id="compare">
  <div id="trash" class="ui-widget-content ui-state-default">
    <div class="compare-box-outer"><div class="compare-box"></div></div>
    <div class="compare-box-outer"><div class="compare-box"></div></div>
    <div class="compare-box-outer"><div class="compare-box"></div></div>
    <div class="compare-box-outer"><div class="compare-box"></div></div>
    <div class="compare-box-outer"><div class="compare-box"></div></div>
  </div>            
</div><!--end of compare-->
            
<div id="productsort"></div><!--end of product sort-->
            
            
<div id="scrollingproducts">
                    
    <div id="productwrapper">
      <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
      <li class="ui-widget-content ui-corner-tr">
   
        <div class="productimage">
        <img src="http://dummyimage.com/57x72/1bb2bd/000000&text=Image" id="dynamicid1" class="icon" alt="Drill" style="height: 72px;" /><br />
        </div>
                                
        <div id="extrainfo">
            Proin pellentesque ligula quis nibh cursus in tempor felis rutrum. Mauris quis blandit ligula. Mauris rhoncus rutrum ipsum, non rhoncus nisl faucibus sit amet. Donec convallis tempor eleifend. Sed faucibus ligula suscipit diam consequat tempus. Sed sem ante, porttitor congue placerat ac, sodales eu purus. Cras quis quam metus. Duis tellus tellus, venenatis a tincidunt nec, mollis eget nibh. Nulla facilisi. Nunc laoreet est et enim tempus porttitor. Nulla facilisi. Proin ut tortor ac augue commodo tincidunt eu nec orci. 
        </div><!--end of extrainfo-->
      </li>    
      </ul>    
    </div><!--end of productwrapper-->


    <div id="productwrapper">
      <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
      <li class="ui-widget-content ui-corner-tr">
  
        <div class="productimage">
        <img src="http://dummyimage.com/57x72/c4b316/000000&text=Image" id="dynamicid2" class="icon"...

CSS

#compare{
   float: right;
   width: 100%;
   clear:both;
   margin-bottom:2px;
   background-color:#fcfcfc;
}

.ui-draggable img {
    width:50;
}

#compare-label{
   width: 150px;
   height:45px;
   font-size:0.7em;
   margin-top:10px;
   float:left;
   text-align:left;
   display:inline;
}

.compare-box-outer{
   float: right;
   width: 50px;
   height:50px;
   margin:5px;
   padding:1px;
   border:1px solid #c7c7c7;
   background:#fff;
   display:inline;
}

.compare-box{
   float:left;
   text-align:center;
   padding:1px;
   width: 48px;
   height:48px;
   border:none;
   display:inline;
}

/*------------------------- Styling the Product -------------------------------*/

#productsort {
    float:left;
    height:30px;
    line-height:30px;
    margin:0;
    background-color:#f3f3f3;
    width:100%;
}

#productwrapper {
    margin:0;
    width:96%;
    padding:0 10px 0 10px;
    float:left;
    border-bottom:1px solid #ececec;
}

#productinfowrapper {
    width:570px;
    height:60px;
    margin-bottom:5px;
}/*This contains the product image, extras, and cart functionality */

#productimage {
    float:left;    
}

#productextras {
    float:left;
    width:250px;
    margin-left:10px;
    text-align:left;
}

#productdescription {
    float:left;
    text-align:left;
    font-size:12px;
}

#productdescription a{
    color:#1b8ab5;    
}

.clear {
    clear:both;
}

/*Draggable Dropable*/
#gallery { float: left; width:100%; padding:5px;} * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 100%; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { cursor: move; }
    
#gallery #productextras {
    float:left;
    width:250px;
    text-align:left;
}

#trash { float: left; text-align:left;  padding: 2px;} * html #trash { height:...

JavaScript

/* jQuery Draggable and Droppable for Search Results Compare 
 * Requires jQuery and jQuery UI to function 
 */


$(function() {
    // there's the gallery and the trash
    var $gallery = $(".productimage"),
        $trash = $(".compare-box");

    // let the gallery items be draggable
    $(".icon", $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: $("#demo-frame").length ? "#demo-frame" : "document",
        // stick to demo-frame if present
        snap: ".compare-box",
        snapMode: "inner",
        cursor: "move",
        helper: "clone",
        start: function() {

            $(".myCheckbox").prop("checked", true);
            $(".ui-draggable").not(this).css({
                height: 50,
                width: 50
            });
        },
        stop: function() {
            $(".ui-draggable").not(this).css({
                height: 50,
                width: 50
            });
        }
    });




    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: ".productimage > .icon",
        tolerance: 'fit',
        activeClass: "ui-state-highlight",
        containment: $(".compare-box").length ? ".compare-box" : "document",
        drop: function(event, ui) {
            deleteImage(ui.helper);
            $(ui.draggable).draggable('disable');
            $(this).droppable('disable');
        }

    });



    // let the gallery be droppable as well, accepting items from the trash
    $gallery.droppable({
        accept: "#trash li",
        activeClass: "custom-state-active",
        drop: function(event, ui) {
            recycleImage(ui.draggable);
        }
    });

    // image deletion function
    var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon...