JSFiddle - React, Tailwind, and code Playground

HTML

drag and drop text boxes to the draggable area

<div class='dragme'>
     <div id="draggable" class="test">
        <input name="stock_0" type="text" id="stock_0" size="20" class="stock" maxlength="20" />
    </div>
</div>
<hr>
<div id='droppable' class='dropme'>am the draggable area</div>
<button id="addbutt">Submit</button>
<div id='instructions'></div>

CSS

.dragme div {
    background-color: black;
    color: white;
    padding: 4px 4px 4px 4px;
    margin-bottom: 2px;
    border-radius: 5px;
}
.dropme div {
    background-color: black;
    padding: 4px 4px 4px 4px;
    margin-bottom: 2px;
    border-radius: 5px;
}
.dragme {
    border: 5px solid #ccc;
    padding: 5px;
    min-height: 73px;
    width: 200px;
    overflow-y: hidden;
    overflow-x: scroll;
    height: 50px;
}
.dropme {
    border: 5px solid #ccc;
    padding: 5px;
    min-height: 100px;
    width: 430px;
}
.ui-draggable {
    float: left;
    padding:2px;
}
.x_butt {
    width:5px;
    display: none;
}
.test img{
    width:30px;
}
input {
    width:50px;
}

JavaScript

$('.dragme div').draggable({
    helper: 'clone',
    opacity: '0.5'
});
$('.dropme').droppable({
    accept: '.dragme div',
    drop: function (event, ui) {
        $(this).append($(ui.draggable).clone());
    }

});

var test_asd = 0;

$('#addbutt').click(function() {
    $("#droppable :text").each(function(){
        test_asd += parseInt($(this).val());
    });
    alert(test_asd);
});