Javascript Problema shop drag and drop

Buongiorno a tutti, avrei i seguenti problemi in questo shop drag and drop per quanto riguarda la sezione del carrello:
1) Se si aggiunge un auto nuova al carrello spariscono i counter delle precedenti auto nel carrello
2) Nel caso in cui un auto viene eliminata dal carrello (itemsCounter <=0), il div contente le informazioni dell' auto deve sparire
3) Se un auto viene eliminata ma poi riaggiunta nel carrello, il div delle informazioni dell' auto appare due volte
Grazie a tutti per il supporto, anche un solo problema risolto sarebbe utile. Manuel

JS:

var carName = ["Saab 1", "Volvo 2", "BMW 3"]
var fuelType = ["electric", "petrol", "diesel"]
var priceCar = [1, 2, 3]
var carImg = ["img/cars/car0.png", "img/cars/car1.png", "img/cars/car2.png"]

var index = 0
var contentCart = ""
var indexInCart = 0
var total = 0
var itemsCounter = []
var saveIndex = []
var bought = []
for (var i = 0; i < carName.length; i++){
    itemsCounter[i] = 0
    bought[i] = false
}

var allModels = document.getElementById("allModels")
var totalDiv = document.getElementById("total")
allModels.addEventListener("load", createAllModels())
totalDiv.addEventListener("load", setZeroTotal())

function setZeroTotal(){
    totalDiv.innerHTML = 0
}

function allowDrop(event) {
    event.preventDefault()
}

function createAllModels(){
    var content=""
    var electricBox = document.getElementById("electric")
    var petrolBox = document.getElementById("petrol")
    var dieselBox = document.getElementById("diesel")

    for (var i = 0; i < carName.length; i++) {
        if (electricBox.checked){
            if(fuelType[i] == "electric")
                content += createCar(i)
        }
        if (petrolBox.checked){
            if(fuelType[i] == "petrol")
                content += createCar(i)
        }
        if (dieselBox.checked){
            if(fuelType[i] == "diesel")
                content += createCar(i)
        }
    }
    
    document.getElementById("content").innerHTML = content
}

function createCar(i) {
    var content = ""
    content += "<div id=\"car"+ i +"\" class=\"carsBox\" draggable=\"true\" ondragstart=\"getIndex("+ i +")\">"
        content += "<div class=\"carName\">"+ carName[i] +"</div>"
        content += "<div class=\"price\">"+ priceCar[i] +"\u20AC</div>"
        content += "<div class=\"carsImage\"><img src="+ carImg[i] +" draggable=\"false\"></div>"
    content += "</div>"

    return content
}

function getIndex(i) {
    index = i
}

//se si aggiunge un auto nuova al carrello spariscono i counter delle precedenti auto nel carrello
function addToCart() {
    var select = true
    if(!bought[index]){
        bought[index] = true
        saveIndex[index] = indexInCart

        contentCart += "<div id=\"cart-"+ indexInCart +"\" class=\"cartBox\">"
            contentCart += "<div class=\"cartInfo\"><span id=\"counter-"+ indexInCart +"\"></span> "+ carName[index] +"</div>"
            contentCart += "<button onclick=\"removeFromCart("+ index +","+ indexInCart +")\">Remove</button>"    
        contentCart += "</div>"
        
        indexInCart++;
        document.getElementById("cart").innerHTML = contentCart
    }
    setCounter(select, index, saveIndex[index])
    calculateTotal(select, index)
}

//nel caso in cui un auto viene eliminata dal carrello, il div contente le informazioni dell auto deve sparire
//se un auto viene eliminata ma poi riaggiunta nel carrello, il div delle informazioni appare due volte
function removeFromCart(index, indexInCart){
    var select = false
    setCounter(select, index, indexInCart)
    calculateTotal(select, index)

    /*
    if(itemsCounter[index] <= 0){
        bought[index] = false
        document.getElementById(`cart-${indexInCart}`).style.display = "none"
    }
    */
}

function setCounter(select, index, indexInCart){
    if (select) 
        itemsCounter[index]++
    else
        itemsCounter[index]--

    document.getElementById(`counter-${indexInCart}`).innerHTML = itemsCounter[index]
}

function calculateTotal(select, index){
    if (select) 
        total += priceCar[index]
    else
        total -= priceCar[index]

    totalDiv.innerHTML = total 
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="css/style.css">

        <!--DA ELIMINARE-->
        <style>
            img{
                height: 70px;
                width: 100px;
            }

            #dropHere, #total, div.carsBox{
                float: left;
                width: 100px;
                height: 100px;
                margin: 10px;
                padding: 10px;
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="scelte">
                <button id="allModels" onclick="createAllModels()">Tutti i modelli</button>
                <button id="audi">Audi</button>
                <button id="bmw">BMW</button>
                <button id="tesla">Tesla</button>
                <button id="mercedes">Mercedes</button>
            </div>

            <div id="fuel">
                <input type="checkbox" id="electric" checked>
                <label for="electric">Elettrico</label>
                <br>
                <input type="checkbox" id="petrol" checked>
                <label for="petrol">Benzina</label>
                <br>
                <input type="checkbox" id="diesel" checked>
                <label for="diesel">Diesel</label>
            </div>

            <div id="content"></div>
            <div id="dropHere" ondrop="addToCart()" ondragover="allowDrop(event)">Drop Here</div>
            
            <div id="total"></div>
            <div id="cart"></div>
        </div>
    </body>
    <script src="js/script.js"></script>
</html>