Добавленный div не смещается вниз JQuery

Нужно чтобы при клике на кнопку добавлялся блок div, внутри которого будут параграфы, но при добавлении они все накладываются друг на друга, что делать? Вот видео.

var newcount    = 0;
    var allprice    = 0;
    var btnn        = $("#submit_btn");
    var form        = $(".formselect");
        form.on('submit', function(e) {
        e.preventDefault();
        var product_id          = $(".info").data("product_id");
        var product_name        = $(".info").data("product_name");
        var price               = $(".info").data("product_price");
        var quantity            = $("#sel1").val();
        newprice                = allprice + (price * quantity );
        allprice                = newprice
        newcount++;
        $(".count_of_quantity").html(quantity)
        $(".count").html(newcount);
        $(".product-name").html(product_name);
        $("#price").html(newprice);
        console.log("*****")
        console.log(allprice)
        console.log("*****")
        console.log(newprice)
        $(".basket-item").append("<div class='deleteblock'>" 
                                    + "<p class='goods'>" + "Goods:" + "<span class='product-name'>" +  product_name + "</span>" + "</p>" 
                                    + "<p class='quantity'>" + "Quantity" +"<span class='count_of_quantity'></span>" + "</p>"
                                    + "<a href='#' class='deleteitem'>X</a>"
                                + "</div>");
    })

CSS код, он разбросан, и там много где очень стоит !important, так много, потому что не смог перебить bootstrap

.basket-item {
    position: absolute;
    top: 39px;
    right: -80px;
    width: 500px;
    background-color: #fff;
    height: 200px;
    color: #000;
    font-weight: 100;
    z-index: 3333;
    overflow-y: auto;
    overflow-x: hidden; 
    border-top: 1px solid #27E760;
}
.basket-item li a {
    color: black !important;
    font-weight: 600;
}
.basket-item li a:hover {
    background-color: transparent !important;
    border: none !important;
} 
.basket-item p {
    position: absolute;
    width: 200px;
    padding: 0 0 !important;
    margin: 0 0 !important;
}
.basket-item a {
    color: #000 !important;
    text-decoration: none;
}
.basket-item a:hover {
    background-color: #ddd !important;
}
.goods {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
}

.quantity {
    left: 40%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
}

.totalprice {
    top: 35%;
    left: 0%;

}
.posss {
    position: absolute;
    bottom: 0;
    width: 100%;
    right: -20px;
}
.deleteitem {
    position: absolute;
    right: 0;
    left: 80%;
    width: 100px;
    font-size: 24px;
    font-weight: 100;
}