Нужно чтобы при клике на кнопку добавлялся блок 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;
}