JavaScript add to cart item too big

[bandiko]

</>
i want it so when i click it get like the other classes im creating a new div but its not geting bootstrap styles (see attached file for better understanding)

```
i
[CODE lang="javascript" title="java script"]f (document.readyState == `loading`)

{document.addEventListener(`DOMContentLoaded`,ready);}

else{ready}

function ready(){const removebutton = document.querySelectorAll(`.remove-pr`);

console.log(removebutton);

for( let i=0 ; i < removebutton.length; i++){

const button = removebutton

button.addEventListener(`click`,function(event){

var buttonclicked= event.target

buttonclicked.parentElement.parentElement.parentElement.remove()

updatecarttotal()})}

var addtocartbuttons=document.getElementsByClassName(`cart`)

for( let i=0 ; i < addtocartbuttons.length; i++){

var button = addtocartbuttons

button.addEventListener(`click`,addtocartclicked)

}



var value = document.getElementsByClassName(`c-input-text qty text`)

for( let i=0 ; i < value.length; i++){

var input = value

input.addEventListener(`change`, quantityChanged)

console.log(value);

}

function quantityChanged(event){

var input = event.target

if(isNaN(input.value) || input.value <=0 ){

input.value = 1

}





updatecarttotal()



}



function addtocartclicked(event){

var button =event.target

var shopitem = button.parentElement.parentElement.parentElement

var title = shopitem.getElementsByClassName(`why-text`)[0].innerText

var imgsrc= shopitem.getElementsByClassName(`img-fluid`)[0].src

console.log(title,imgsrc)

additemtocart(title,imgsrc)



}

function additemtocart(title,imgsrc){

var cartrow = document.createElement(`div`)

cartrow.classList.add(`cart-list`)

var cartitems = document.getElementsByClassName(`side`)[0]

var cartrowcontents =` <a href="#" class="photo"><img src="images/img-pro-01.jpg" class="cart-thumb" alt="" /></a>

<h6><a href="#">Delica omtantur </a></h6>

<p>1x - <span class="price">$80.00</span></p>`

cartrow.innerHTML = cartrowcontents

cartitems.append(cartrow)



}



function updatecarttotal() {

var cartitemcontainer = document.getElementsByClassName(`table`)[0]

var removebutton = document.querySelectorAll(`.cart-items`)

var total =0

for( let i= 0 ; i < removebutton.length; i++){

var removebutton = removebutton

var priceelement = removebutton.getElementsByClassName(`price-pr`)

var quantitylement = removebutton.getElementsByClassName(`c-input-text qty text`)







var price =parseFloat(priceelement.innerText.replace(`$`,``))

var quantity = quantitylement.value

total = total + (price*quantity)



document.getElementsByClassName("d-flex-gr-total").innerText=`$`+total;

document.getElementsByClassName("total-pr").innerText=`$`+total;



console.log(quantitylement) }



}

}

</>[/CODE]
```
[CODE lang="html" title="html"]</>

html

```

<div class="side">

<a href="#" class="close-side"><i class="fa fa-times"></i></a>

<li class="cart-box">

<ul class="cart-list">

<li class = "cart1">

<a href="#" class="photo"><img src="images/img-pro-01.jpg" class="cart-thumb" alt="" /></a>

<h6><a href="#">Delica omtantur </a></h6>

<p>1x - <span class="price">$80.00</span></p>

</li>

<li>

<a href="#" class="photo"><img src="images/img-pro-02.jpg" class="cart-thumb" alt="" /></a>

<h6><a href="#">Omnes ocurreret</a></h6>

<p>1x - <span class="price">$60.00</span></p>

</li>

<li>

<a href="#" class="photo"><img src="images/img-pro-03.jpg" class="cart-thumb" alt="" /></a>

<h6><a href="#">Agam facilisis</a></h6>

<p>1x - <span class="price">$40.00</span></p>

</li>

<li class="total">

<a href="#" class="btn btn-default hvr-hover btn-cart">VIEW CART</a>

<span class="float-right"><strong>Total</strong>: $180.00</span>

</li>

</ul>[/CODE]


</li>
</div>
</>