How can I access an HTML class that is rendered using Javascript?

I have a carousel of products for my e-commerce website. But I rendered the products into the carousel using JavaScript and now, the carousel doesn't work. what can I do? I would drop code snippets down below.

Here is the HTML

    <body>
  <p class="logo">shop Cindy</p>
  <nav class="navigation">
    <!--<div class="categories">
      <p class="category">categories</p>
      <i class="fa fa-sort-down cart" style="font-size:100px;"></i>
    </div> -->
    <!-------------links for laptop nav bar-------------->
    <ul class="unordered">
      <li><a href="#">Women</a></li>
      <li><a href="#">Jeans</a></li>
      <li><a href="#">Kids</a></li>
    </ul>
  </nav>
  <div class="cart-number">
    <i style="font-size: 40px" class="fa">&#xf07a;</i>
    <p class="totalItemsInCart">
      0
    </p>
  </div>


  <!--------------big changing images starts here------->
  <div class="bigpic">
    <a class="bigpic-a" href="#">
      <p class="bigpic-p">shop new arrivals</p>
    </a>
  </div>
  <!---------------big changing images ends here--------->

  <!---------------------category for hover dropdown-------->
  <div class="categories2">
    <div class="join">
      <p class="category2">shop categories</p>
      <i class="fa fa-sort-down diff" style="font-size:24px;"></i>
    </div>
    <ul class="min-cart">
      <li><a href="#">Women</a></li>
      <li><a href="#">Jeans</a></li>
      <li><a href="#">Kids</a></li>
    </ul>
  </div>

  <!----------carousel1 for category 1: hot new-------------------->
  <main>
    <h1>new arrivals jbkj</h1>
    <span>&#139;</span>
    <span>&#155;</span>
    <section>
      <!---------------------render images here hopefully------------>
    </section>
  </main>
  <!------------------category 1 ends here-------------------->
  

  <!----------carousel for category 2------------------------>
  <main>
    <h1>new arrivals</h1>
    <span>&#139;</span>
    <span>&#155;</span>
    <section class="section">
      <!---------------------render images here hopefully------------>
    </section>
  </main>
  <!----------------category 2 ends here------------------------->

<!--------------big changing jeans images starts here------->
<div class="bigpic">
  <a class="bigpic-a" href="#">
    <p class="bigpic-p">shop new arrivals</p>
  </a>
</div>
<!---------------big changing jeans images ends here--------->

<!----------carousel for category 3------------------------>
<main>
  <h1>new arrivals</h1>
  <span>&#139;</span>
  <span>&#155;</span>
  <section class="section1">
    <!---------------------render images here hopefully------------>
  </section>
</main>
<!-----------------------category 3 ends here-->

<!--------------big changing jeans images starts here------->
<div class="bigpic">
  <a class="bigpic-a" href="#">
    <p class="bigpic-p">shop new arrivals</p>
  </a>
</div>
<!---------------big changing jeans images ends here--------->

<!----------carousel for category 4------------------------>
<main>
  <h1>new arrivals</h1>
  <span>&#139;</span>
  <span>&#155;</span>
  <section class="section2">
    <!---------------------render images here hopefully------------>
  </section>
</main>
 <script src="product.js"></script>
  <script src="collections.js"></script>
</body>

Here is the javaScript for the carousel

   var span = document.getElementsByTagName("span");
var carouselProducts= document.getElementsByClassName(".products");
var l = 0;
span[1].onclick = ()=>{
    l++;
    for(var i of carouselProducts) {
        if (l==0) {i.style.left = "0px";}
        if (l==1) {i.style.left = "-480px";} //-740
        if (l==2) {i.style.left = "-960px";} //-1480
        if (l==3) {i.style.left = "-1440px";} //-2220
        if (l==4) {i.style.left = "-1920px";} //3500
        if (l>4) {l=4;}
    }
}

span[0].onclick = ()=>{
    l--;
    for(var i of carouselProducts) {
        if (l==0) {i.style.left = "0px";}
        if (l==1) {i.style.left = "-480px";}
        if (l==2) {i.style.left = "-960px";}
        if (l==3) {i.style.left = "-1440px";}
        if (l<0) {l=0;}
    }
}

And finally, here is the javaScript for the rendered products. how do I access the ".product" class from this code in the carousel code?

  function renderProducts() {
  productsNew.forEach((product) => { 
    if (product.category === "first") {
      productEl.innerHTML += `
        <div class="product">
        <picture>
        <img src= "${product.imgsrc}" alt="where my image at?">
        </picture>
        <div class="details">
        <p>
            <b>${product.name}</b>
            <small>New Arrival</small>
        </p>
        <samp>${product.price}</samp>
        </div>
        <button class="cart-btn" onclick="addToCart(${product.id})">
        <p>
        Add-cart
        </p>
        </button>
    </div>
        `
    } else if (product.category === "section1") {
      SectionEl.innerHTML += `
        <div class="product">
        <picture>
        <img src= "${product.imgsrc}" alt="where my image at?">
        </picture>
        <div class="details">
        <p>
            <b>${product.name}</b>
            <small>New Arrival</small>
        </p>
        <samp>${product.price}</samp>
        </div>
        <button class="cart-btn" onclick="addToCart(${product.id})">
        <p>
        Add-cart
        </p>
        </button>
    </div>
        `
    } else if (product.category === "section2") {
      Section1El.innerHTML += `
        <div class="product">
        <picture>
        <img src= "${product.imgsrc}" alt="where my image at?">
        </picture>
        <div class="details">
        <p>
            <b>${product.name}</b>
            <small>New Arrival</small>
        </p>
        <samp>${product.price}</samp>
        </div>
        <button class="cart-btn" onclick="addToCart(${product.id})">
        <p>
        Add-cart
        </p>
        </button>
    </div>
        `
    } else {
       Section2El.innerHTML += `
        <div class="product">
        <picture>
        <img src= "${product.imgsrc}" alt="where my image at?">
        </picture>
        <div class="details">
        <p>
            <b>${product.name}</b>
            <small>New Arrival</small>
        </p>
        <samp>${product.price}</samp>
        </div>
        <button class="cart-btn" onclick="addToCart(${product.id})">
        <p>
        Add-cart
        </p>
        </button>
    </div>
        `
    }
  });
}
renderProducts();

Thank you.