Mon selected ne fonctionne pas sur les mobiles

bonjour a tous

cela fait de nouveau des jours que je me bats avec mon panier en javascript
il me manque juste un détail pour la finalisation
je suis confronté a un petit soucis

Mon panier en javascript fonctionne très bien sur pc

Lorsque je clic dans le select le nombre d'article passe a 1 et lorsque je choisi une quantité le data-qte prends la valeur de l élément value donc cela se comporte comme cela devrait l'etre

cela est correct

mais sur mon smartphone cela ne fonctionne pas correctement

Lorsque je clic dans le select le nombre d'article passe a 1
Lorsque je choisi une quantité le data-qte NE prends PAS la valeur de l élément value

je souhaiterais donc que lorsque je clic dans le select pour choisir une quantité que cela n'indique pas 1 mais prenne la valeur de l'élément value

voici un lien vers un exemple

https://phil.pecheperle.be/panier/index1.php

j'ai donc fouiller mon code pour savoir ou et comment cela se passait

j'ai donc la partie html qui permet de sélectionner le select

<select class="form-select btn btn-primary ajouter-panier" aria-label="2001" onchange="changeQte(this);" style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1"   data-checkbox="2001"  >
                  <option selected value="0">0 sachet dans le panier </option>
                  <option value="1"> sachet dans le panier</option>
                  <option value="1">1 sachet dans le panier</option>
            <option value="2">2 sachets dans le panier</option>
                  <option value="3">3 sachets dans le panier</option>
                  <option value="4">4 sachets dans le panier</option>
                  <option value="5">5 sachets dans le panier</option>
                                </select>

ce qui me fait des misères c'est ce data-qte="1" que j'ai mis a data-qte="0" mais cela n a rien change

lors du clic dans le select cette fonction est appelée et donc utilise le data-qte

$('.ajouter-panier').click(function(event) {
    event.preventDefault(); 

//on mets des variables a 0
    var nom_option = "";
    var prix_option = 0;
    var option_checkbox = $(this).data('checkbox');

//on regarde si le select est choisi
    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);

//on test la date-qte partie qui m intéresse
    if ($(this).attr('data-qte'))
    {
        var qte_option = $(this).attr('data-qte');
        MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option);
    }
    else MonPanier.ajouter_produit_dans_panier(nom, prix, 1);

    afficherpanier();
});

$('.clear-panier').click(function(){
    MonPanier.clearpanier();
    afficherpanier();
});

a ce moment la console m affiche 1
je souhaiterais que ca soit l élément value qui soit pris en compte et donc n affiche rien puisque je n'ai aps encore fait de choix

ensuite je choisi la quantité avec le select value
a ce moment sur mon pc la valeur data-qte prends bien la valeur de l'element.value

par contre sur mon smartphone cela ne se passe pas

et le code est le suivant

function changeQte(element){

//on traite la variable qte
    var qte = element.value;
    var t = $(element);
    var label = t.attr("aria-label");
    let data_qte =  document.querySelector("[data-nom='"+ label +"']");
    data_qte.removeAttribute("data-qte");
    data_qte.setAttribute("data-qte", ""+qte+"");

//on affiche le pop up
   let m;
     m = "\ Le panier compte désormais ";
     m += "<font color='red'><strong>";
      m += event.target.getAttribute("data-qte");
      m += "</strong></font>";
  m += " sachet(s) de l'article \'";
  m += event.target.getAttribute("data-nom");
   //m += "\" a bien été ajouté au panier";
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }
  let e = document.createElement('div');
  let s = "";
  e.classList.add("maJolieAlert");
  s += '<div><p>' + m + '</p>';
  s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
  e.innerHTML = s;
  insertAfter(e, event.target);
}

    function fermeMaJolieAlert(event) {
  event.target.parentNode.parentNode.remove();
}