DOM'a yeni eklenen elemandan sonra js codlari calismiyor

jquery ile api.php'ye post atarak verileri cekip sayfaya
yukluyorum ama yeni gelen elemanlara js codlarim calismiyor
ve eski elemanlarada uyguladigim js Eventlari da calismiyor

yapmak istedigim sey font-awesome'da butona basdikdan sonra yeni

eklenen verilere jss codelari uygulamak(font awesome)[https://fontawesome.com/v5.15/icons?d=gallery&p=2]

jquery:

   $('.download-place button').on('click',function(e){   
    e.preventDefault();
 
    if(!this.classList.contains('not-active'))
    {
        ++coin;

    let data={
        type:'yukle',
        limit:<?=$productsLimit?>*coin
    };
  console.log(data.limit);

    $.post('api.php',data,function(response){
       
        if(response.html)
        {
           
document.querySelector('.product-place').innerHTML+=response.html;
if(response.length<=5)
            {
       let boxPlaces=document.querySelectorAll('.box-place');
       boxPlaces[boxPlaces.length-1].classList.add('half');
        }
        }else{
let button=document.querySelector('.download-place button');
button.classList='not-active';
      button.innerHTML="Больше нет продуктов.";
        }
    
},'json')
}
})

api.php:

<?php
require __DIR__.'/connection.php';
require __DIR__.'/helpers.php';

$type=post('type') ?? NULL;
$productLimit=post('limit') ?? 0;
$response=[];                                                                  

switch($type){
    case 'yukle':
      
        $products=$db->query("SELECT * FROM products LIMIT $productLimit,10")->fetchAll(PDO::FETCH_ASSOC);
        $response['length']=count($products);
        if(isset($products) && !empty($products))
        {
        ob_start();
        require __DIR__.'/static/box-place.php';
        $response['html']=ob_get_clean();
        }
        break;
        default:

        break;
}
echo json_encode($response);

?>

box-place.php:

 <article class="box-place">
<?php foreach($products as $product):
    $colors=explode(',',$product['colors']);
    ?>
    <div class="box" id="box<?=$product['id']?>">
    <div class="image-place">
        <img src="<?=$product['img']?>" alt="<?=$product['name']?> case image">
    </div>
 <div class="name">  <a href="#"><?=$product['name']?></a></div>
    <div class="color-place">
        <?php $coin=1;
        foreach($colors as $color):?>
            <div class="color <?=$color?> <?=$coin==1?'selected':''?>"><span></span></div>
            <?php ++$coin; endforeach;?>
    </div>
    <div class="box-bottom">
        <div class="price-place">
            <span class="price"><?=$product['price']?></span>₴
        </div>
        <div class="button-place">
            <button><i class="fas fa-shopping-basket"></i>В корзину</button>
        </div>
    </div>
</div>
<?php endforeach;?> 
        </article>

buda elemanlara uyguladigim js codlari:



var itemInner=`  <div class="item-left"><div class="image-place">
<img src="" alt="iphone case image">
</div></div>
<div class="item-middle">
<div class="item-info"> <div class="item-name"></div>
<div class="item-color"><span></span></div>
<div class="item-price"><span></span>₴</div></div>
<div class="item-button">
<button class="minus-button">-</button>
<input type="number" value="1" readonly>
<button class="plus-button">+</button>
</div>
</div>
<div class="item-right"><i class="fas fa-times"></i></div>`;
var itemPlace=document.querySelector('.items');
var boxes=document.querySelectorAll('.box');
var popup=document.querySelector('.pop-up');
var totalPlace=document.querySelector('.total span');
var continueButton=document.querySelector('.basket-bottom-button button');
var emptyBasket=document.querySelector('.empty-basket');
var orderButton=document.querySelector('.order');
//functions
function clearClasses(array)
{
array.forEach(val=>{
    val.classList.remove('selected');
})
}
function test(id,classColor)
{
let items=document.querySelectorAll('.item');
let answer=true;
for(i=0;i<items.length;i++)
{
    let itemColor=items[i].querySelector('.item-color');
    if(items[i].id==id && itemColor.classList.contains(classColor[1]))
    {
    answer=false;
break;    
}
}
return answer;
}
function addItem(src,category,price,id,classColor)
{
   
    let new_elem=document.createElement('div');
    new_elem.classList.add('item');
    new_elem.id=id;
    new_elem.innerHTML=itemInner;
    new_elem.querySelector('img').src=src;
    new_elem.querySelector('.item-name').innerHTML=category;
    new_elem.querySelector('.item-price span').innerHTML=price;
classColor.forEach(color=>{
    new_elem.querySelector('.item-color').classList.add(color);
    new_elem.querySelector('.item-color span').style.background=classColor[1];
});
    itemPlace.appendChild(new_elem);

}
function repairItems()
{
let items=popup.querySelectorAll('.item');
let length=items.length;
let item=items[length-1];
let deleteButton=item.querySelector('i');
let minusButton=item.querySelector('.minus-button');
let plusButton=item.querySelector('.plus-button');
let input=item.querySelector('input');
deleteButton.addEventListener('click',()=>{
    item.remove();
    countTotal();
    controlBasket();
});
minusButton.addEventListener('click',()=>{
    let value=Number(input.value);   
    --value;
    if(value<=0)
 {
item.remove();
controlBasket();
 }else{
     input.value=value;
 }
 
 countTotal();
});
plusButton.addEventListener('click',()=>{
let value=Number(input.value);
input.value=++value;
    countTotal();
});


}
function countTotal()
{
    let total=0;
    let items=document.querySelectorAll('.item');
    items.forEach(item=>{
        let input=item.querySelector('input');
        let itemPrice=item.querySelector('.item-price span').innerHTML;
        let itemTotalPrice=input.value*Number(itemPrice);
        total+=itemTotalPrice;
    });
    totalPlace.innerHTML=total.toFixed(2);
}
function controlBasket()
{
    let value=itemPlace.innerHTML;
if(value=="")
{
emptyBasket.style.display="block";
orderButton.classList.add('not-allowed');
}
else{
emptyBasket.style.display="none";
orderButton.classList.remove('not-allowed');
}

}
//forEaches
boxes.forEach(box=>{
    let colors=box.querySelectorAll('.color');
    colors.forEach(color=>{
        let classes=color.classList;
        color.querySelector('span').style.background=classes[1];
        
        color.addEventListener('click',()=>{
            clearClasses(colors);
            color.classList.add('selected');
        });

    });
    let button=box.querySelector('.button-place button');
        button.addEventListener('click',()=>{
    popup.classList.add('active');
    let src=box.querySelector('img').src;
    let category=box.querySelector('.name a').innerHTML;
    let price=box.querySelector('.price').innerHTML;
    let classColor=box.querySelector('.selected').classList;
    let id=box.id+classColor[1];   
   
    if(test(id,classColor))
    {
    addItem(src,category,price,id,classColor);
    repairItems();
    }  else{
        let item=document.querySelector(`#${id}`);
        let input=item.querySelector('input');
        let value=Number(input.value);
        input.value=value+1;

    }  
    countTotal();
    controlBasket();
})
});
//Event listeners
popup.querySelector('i').addEventListener('click',()=>{
    popup.classList.remove('active');
});
continueButton.addEventListener('click',()=>{
    popup.classList.remove('active');
});