jQuery draggable - Only first drag is remembered

Question

I have 2 items. When you drag the items onto a color it should then alert and tell you the item you chose, and the color you dragged onto.

The color alert works fine, but it only ever remembers the first item you dragged - until you refresh the page and choose another.

I have created two separate draggable instances but still the problem occurs. I can't figure this out for love nor money!

Here is a JSFIDDLE: https://jsfiddle.net/ytcqsch6/

HTML

    <div id="color-block-1" class="color-blocks" theColor="blue"></div>
    <div id="color-block-2" class="color-blocks" theColor="purple"></div>
    <div id="color-block-3" class="color-blocks" theColor="pink"></div>


    <div id="choose-box">
        <h1 id="choose-box-header">Title</h1>
        <div id="drag-box">   
            <div class="drag drag-eg" >ELECTRICAL<br>GOODS</div>
            <div class="drag drag-fa" >FASHION</div>
        </div>
    </div>

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

JS:

/// DRAGGABLE ///
$.fn.liveDroppable = function (opts) {
        if (!$(this).data("ctDropInit")) {
            $(this).data("ctDropInit", true).droppable(opts);
        }
};

$(".drag-eg").each(function(index, elem) {
    $(elem).draggable({
        cursor: "grab",
        distance: 0,
        opacity: 1,
        helper: 'clone',
        start: function() {
            $(this).css("opacity","0");
            startDroppable("Electrical Goods");
        },
        stop: function() {
            $(this).css("opacity","1");
        }
    });
});

$(".drag-fa").each(function(index, elem) {
    $(elem).draggable({
        cursor: "grab",
        distance: 0,
        opacity: 1,
        helper: 'clone',
        start: function() {
            $(this).css("opacity","0");
            startDroppable("Fashion");
        },
        stop: function() {
            $(this).css("opacity","1");
        }
    });
});


function startDroppable($industry){
    $('.color-blocks').liveDroppable({
        hoverClass: "ctDropHover",
        drop: function (event, ui) {
            alert( "Dropped! - " + $industry + "----" + $(this).attr("theColor"));
    }
});
}
/// DRAGGABLE END ///

Answer 1

hi try following in js code.

/// DRAGGABLE ///
$.fn.liveDroppable = function (opts) {
        if (!$(this).data("ctDropInit")) {
            $(this).data("ctDropInit", true).droppable(opts);
        }
};

$(".drag-eg").each(function(index, elem) {

    $(elem).draggable({
        cursor: "grab",
        distance: 0,
        opacity: 1,
        helper: 'clone',
        start: function() {
            $(this).css("opacity","0");
            startDroppable("Electrical Goods");
        },
        stop: function() {
            $(this).css("opacity","1");
        }
    });
});

$(".drag-fa").each(function(index, elem) {
    $(elem).draggable({
        cursor: "grab",
        distance: 0,
        opacity: 1,
        helper: 'clone',
        start: function() {
            $(this).css("opacity","0");
            startDroppable("Fashion");
        },
        stop: function() {
            $(this).css("opacity","1");
        }
    });
});


function startDroppable($industry){
    $('.color-blocks').liveDroppable({
        hoverClass: "ctDropHover",
        drop: function (event, ui) {
            alert( "Dropped! - " + $(ui.draggable[0]).text() + "----" + $(this).attr("theColor"));  //only changed here..

    }
});
}
/// DRAGGABLE END ///