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');
});