JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stCategories">
    <div class="draggable red"></div>
    <div class="draggable blue"></div>
</div>

<div class="circBase green"><span class="number">0</span></div>
<div class="circBase green"><span class="number">0</span></div>

CSS

div {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    float:left;
}

.red {
    background-color: red;
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}

.CHHover {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}

JavaScript

var recipientValue = [5, 14];
var currentDragged; // the folder that was dragged
var value;

var primaryCare = {};    
primaryCare.currentActiveCategories = [];    
primaryCare.currentValue = addValues(primaryCare.currentActiveCategories);

function addValues(activeCategories) {
var tempTotal = 0;
for(var i = 0; i < activeCategories.length; i++){
    tempTotal += activeCategories[i];
}
return tempTotal;
}

$(function() {
//folders
$(".stCategories").find(".draggable").each(function(index) {
    $(this).draggable({
        scroll: true,
        scrollSensitivity: 100,
        scrollSpeed: 100,
        cursor: "move",
        helper: "clone",
        drag: function( event, ui ) {
            // set what item is being dragged
            currentDragged = index;
        }
    });
});

// containers
$(".circBase").each(function(index){
    $(this).droppable({
          greedy: true,
          hoverClass: "CBHover",
          drop: function( event, ui ) {
            value = recipientValue[currentDragged];
            primaryCare.currentActiveCategories.push(value);
            $(this).children('h3').html(primaryCare.currentValue);
            $(this).find(".number").html(value);
        }
    });
});
});