Input dans une boucle

Bonjour,

je n'arrive pas a remonter la bonne valeur, dans une boucle php j'ai un input hidden qui contient le nom de ma catégorie comme ceci :

include'bdd.php';
     
    $req = $dbh->query('SELECT * FROM catégorie');
     
    while($result = $req->fetch()){
         
    $categorie = $result['titre'];
    $photo = $result['photo'];
    $chemin = "categorie/$categorie/$photo";
     
    echo "<div class='container'>
     
    <div class='contr'>
        <cite>Glissez – déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers – taille maximale par fichier 256 kb)</cite>
    </div>
     
    <div class='upload_form_cont'>
        <div name='dropArea' id='dropArea' style='background-image: url($chemin); background-size: cover;'>Zone de drop</div>
         
        <div class='info'>
            <div>Fichiers restants : <span id='count'>0</span></div>
            <input id='url' type='hidden' value='./upload.php'/>
            <strong><input name='categorie' type='hidden' value='$categorie'/></strong>
        </div>
             
            <h2>Résultat :</h2>
             
            <div id='result'></div>
             
            <canvas width='500' height='20'></canvas>
        </div>
    </div>
</div>";
         
    }

c'est div sont des "drag and drop" donc comment savoir lorsque je met une image dans une catégorie qu'elle est la catégorie sélectionner :

// variables
var dropArea = document.getElementsByName('dropArea');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var count = document.getElementById('count');
var destinationUrl = document.getElementById('url');
<strong>var categorie = encodeURIComponent(document.getElementsByName("categorie").value);</strong>
var result = document.getElementById('result');

comme ceci il me dit que la valeur est "undefined" car il sélectionne tout les input qui on comme name categorie alors comment faire pour savoir laquelle a été sélectionner ?

CDT