Probleme avec document.getElementsByClassName

Bonjour a tous

je continue a découvrir JavaScript et de nouveau je suis confronte a un petit soucis

Dans mon bon de commande j'ai +- 300 articles et chaque article est enveloppé par une div  

dans lequel il y a une class couleur1

je souhaiterais que lorsque  la quantité est plus grande que 0 dans l'intérieur de ma div que ma div devienne verte

cela fonctionne super nickel avec une div 

Mais si je remet la même classe pour mon deuxième article et que la quantité de mon article est plus grand que 0

Ma div ne passe pas verte sauf si j'ajoute par exemple la classe couleur3

Pour mieux comprendre

voici l'extrait de mon code ou je récupère la quantité de l'article et ou je teste cette quantité , afin de lui donner la couleur verte si quantité pus grand que 0

$('.ajouter-panier').click(function(event) {
	event.preventDefault();
	var nom_option = "";
	var prix_option = 0;
	var url = $(this).data('url');
	var option_checkbox = $(this).data('checkbox');
	if (option_checkbox != "") {
		var checkboxes = document.getElementsByClassName(option_checkbox);
		for (var i = 0; i < checkboxes.length; i++) {
			if (checkboxes[i].checked == true) {
				var nom_option = nom_option + " (" + $(checkboxes[i]).data('nom') + ")";
				var prix_option = prix_option + Number($(checkboxes[i]).data('prix'));
			}
		}
	}
	if ($(this).data('select')) {
		var nom = $(this).data('nom') + " (" + document.getElementById("" + $(this).data('select') + "").value + ")" + nom_option;
	} else var nom = $(this).data('nom');
	var prix = Number($(this).data('prix')) + (prix_option);
	if ($(this).attr('data-qte')) {
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option, url);
	} else MonPanier.ajouter_produit_dans_panier(nom, prix, 1, url);
	var color = $(this).attr('data-qte');
	console.log(color);
	if (color > 0) {
		const collection1 = document.getElementsByClassName("couleur1");
		collection1[0].style.backgroundColor = "#9bdf49";
		const collection2 = document.getElementsByClassName("couleur2");
		collection2[0].style.backgroundColor = "#9bdf49";

	} else {
		const collection1 = document.getElementsByClassName("couleur1");
		collection1[0].style.backgroundColor = "";
		const collection2 = document.getElementsByClassName("couleur2");
		collection2[0].style.backgroundColor = "";


	}
	afficherpanier();
});

et la partie html d'une des div

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 couleur1" style="margin-bottom: 15px; padding-left: 5px; padding-right: 5px;">
  <div class="card">
    <div class="">
      <h3 class="card-title centrer_titre_texte couleur2">2001</h3>
      <div class="card-body stylecardbody" style="padding-top: 0;">
        <div class="row mt-12">             
          <div class="col-md-12">
            <select class="form-select styleselect" aria-label="2001" onchange="changeQte(this);">
              <option selected value="1.10">1 sachet </option>
              <option value="2">2 sachets</option>
              <option value="3">3 sachets </option>    
            </select>
          </div>
          <a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);"> ajouter au panier </a>      
        </div>       
      </div>
    </div>
  </div>
</div>

Ma question est donc de savoir comment faire pour que cela fonctionne avec chaque article sans devoir mettre une classe différente pour chaque produit