Ajout automatique de liste déroulande dans formulaire + insertion dans DB

Bonsoir à tous,
Je me permets de vous écrire car je suis débutant en Javascript, et je me tape la tête contre les murs.

J'ai un formulaire (html php) permettant de pouvoir insérer dans ma base de donnée un nouvel administré.
Je dois choisir à cet administré une catégorie (dans une liste déroulante)
Je peux lié à cet administré d'autres catégorie si je le souhaite, en cliquant sur le bouton "ajouter des champs"
Cela fait apparaitre d'autres listes déroulantes : je peux ainsi choisir une autre catégorie.

Une fois cela fait, j'envoie le formulaire, et ces infos vont s'insérer dans ma DB.

Problème :
- comment, pour ce qui est des liste déroulante ajoutée via JS, attribué un id unique ? : <select name="cat1" / cat2 / cat 3 etc.
- comment dire ensuite : je fais autant de requête que de catégories sélectionnées ?

Si vous pourriez me donner quelques pistes, ce serait formidable !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    $(document).ready(function() {
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID
 
        var x = 1; //initial text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
 
 
                $(wrapper).append('<SELECT name="<?php echo 'cat'.$uniqid.'"'; $sql = "SELECT * FROM categories ORDER BY nom_categories ASC"; $result = $mysqli->query($sql); if ($result->num_rows > 0){while($row = $result->fetch_assoc()) { $categorienom = $row["nom_categories"]; $categorieid = $row["id_categories"]; echo '<option value="'.$categorieid.'">'.$categorienom.'</option>'; } }?> </SELECT> <a href="#" class="remove_field">Supprimer</a><br>');
 
            }
        });
 
        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<SELECT name="cat1" >
                        <?php  /// Affichage des catéogies existantes
                            $sql = "SELECT * FROM categories ORDER BY nom_categories ASC"; 
                            $result = $mysqli->query($sql);
                            if ($result->num_rows > 0)
                                {
                                while($row = $result->fetch_assoc())
                                    {
                                    $categorienom = $row["nom_categories"];
                                    $categorieid = $row["id_categories"];
                                    echo '<option value="'.$categorieid.'">'.$categorienom.'</option>';
                                    }
                                }  
                        ?>
 </SELECT>
 
<div class="input_fields_wrap">
     <button class="add_field_button">Ajouter des champs</button>
</div>    
 
 <button type="submit" class="boutonSubmit boutonform" role="button" aria-disabled="false">Ajouter</button>

Code:

1
2
3
4
5
6
7
8
9
10
$sql3 = "INSERT INTO categoriesadministres
                                        (id_categoriesadministres,
                                        id_administres,
                                        id_categories)
 
                                        VALUES
                                        ('',
                                        '$nextid',
                                        '$cat1')    //////   comment dire ensuite : je fais autant de requête que de catégories sélectionnées ?
                                        ";