JSFiddle - React, Tailwind, and code Playground

HTML

<section id="items">
    <div class="item">Monitor <span class="price">100$</span></div>
    <div class="item">Mouse <span class="price">20$</span></div>
    <div class="item">Keyboard <span class="price">60$</span></div>
</section>
<section id="basket">
    <p>Total price:<span class="total_price"></span></p>
</section>

CSS

body{
    font-family:tahoma;
}
#items{
    background:rgba(0,0,0,0.1);
}
#basket{
    margin-top:10px;
    background:rgba(0,0,0,0.2);
}
div{
    padding:5px;
    cursor:pointer;
}
div:hover{
    background:rgba(0,0,0,0.2);
}

JavaScript

$("#items").on('click', ".item", function() {		
	$(this).appendTo("#basket");	
});
$("#basket").on('click', ".item", function() {		
	$(this).appendTo("#items");	
});