JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<div>
    <br/>Catalogue<br/>
</div>
<div id="catalogue">
    <table id="catalogueContent">
        <tr>
            <th>Designation</th>
            <th>Prix</th>
        </tr>
        <tr class="item">
            <td><span name="productName">bottes</span></td>
            <td><span name="productPrice">21</span>€</td>
        </tr>
        <tr class="item">
            <td><span name="productName">pantalon</span></td>
            <td><span name="productPrice">37</span>€</td>
        </tr>
        <tr class="item">
            <td><span name="productName">veste</span></td>
            <td><span name="productPrice">53</span>€</td>
        </tr>
    </table>
</div>
<div>
    <br/><br/>Glissez des articles dans le panier<br/><br/>
</div>
<div id="cart">
    <table id="cartContent" width="100%">
        <thead>
            <tr>
                <th>Article</th>
                <th>prix</th>
                <th>Quantité</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr class="total">
                <td>Total : </td>
                <td><span id="totalPrice">0</span><span>&euro;</span></td>
                <td><span id="totalArticles">0</span></td>
            </tr>
        </tfoot>
    </table>
</div>

CSS

#cart {
    width:300px;
    border:2px solid red;
}
#cart th, #cart td{
    border:1px dotted red;
}

#catalogueContent {
    border:1px solid black;
}
#catalogueContent th, #catalogueContent td{
    border:1px solid black;
}

JavaScript

$('.item').draggable({
    revert:true,  
    revertDuration:100,
    helper:'clone',
    connectWith:'#cartContent',
    update: function(event, ui){
        $(this).find('td[name=poductName]').html('trololo');
    }
}); 

$('#cartContent').droppable({  
    accept:".item",
    drop:function(event,ui){
        var ligneProduit = ui.draggable;
        var name = ligneProduit.find("span[name='productName']").text();
        var price = ligneProduit.find("span[name='productPrice']").text();
        addProduct(name,price);
    }
});  

$(document).on("click",".removeCross",function(){
    var ligne = $(this).closest('tr');
    var name = ligne.find('td[name="name"]');
    var price = ligne.find('td[name="price"]');
    removeProduct(name.text(),price.text(),$(this).prop('id'));
});

var data = {"total":0,"rows":[]};  
var totalCost = 0;  
function addProduct(name,price){  
    function add(){  
        for(var i=0; i<data.rows.length; i++){  
            var row = data.rows[i];  
            if (row.name == name){  
                row.quantity += 1;  
                return;  
            }  
        }   
        data.rows.push({  
            name:name,    
            price:price,
            quantity:1
        });  
    }   
    add();  
    data.total += 1;
    totalCost += parseInt(price);  
    refreshCart();
}  

function removeProduct(name,price,index){ 
    function remove(){  
        for(var i=0; i<data.rows.length; i++){  
            var row = data.rows[i];  
            if (row.name == name){  
                row.quantity -= 1;  
                if(row.quantity==0){
                    data.rows.splice(index,1);
                }
                return;
            }  
        }     
    } 
    data.total -= 1;
    totalCost -= parseInt(price);
    remove();
    refreshCart();
}

function refreshCart(){
    $("#cartContent tbody").html('');
     for(var j=0; j<data.rows.length; j++){
            var ligne = $('<tr>');
           ...