Facture avec un ou plusieurs articles

Je reviens avec mon problenproblème qui auquel je n'ai pas encore trouvé la solution .
ce script ci-dessous permet d'ajouter et de supprimer les champs input sur un formulaire de saisie de facturation. l'objectif est de chercher un article (nom, prix et id).

<script>

     $(document).on("click", "#addMore", function(e){
         e.preventDefault();
         var art_name = $(".nom_article").val();
         $.ajax(
             {
                 type:"POST",
                 url:"rechercher_article.php",
                 data:{
                     'checking_id':true,
                     'art_name':art_name
                 },
                 success: function (response) 
                 {
                     $.each(response, function(key, stoView)
                     {
                         $('#id_art').val(stoView['id_art']);
                         $('#nom_art').val(stoView['nom_art']);
                         $('#prix_art').val(stoView['prix_art']);
                     });
                 }
             });  
         $(".items").append(`
             <div class="row addlRow">
                 <div class="mb-3 col-md-3">
                     <input type="hidden" name="item_id[]" id="id_art"  class="form-control form-control-sm"/>
                     <input type="text" name="item_name[]" id="nom_art"  class="form-control form-control-sm" />
                 </div>
                 <div class="mb-3 col-md-3">
                     <input type="number" name="rate[]" id="prix_art"  class="form-control form-control-sm" min="1"  />
                 </div> 
                 <div class="mb-3 col-md-3">
                     <input type="text" name="stock[]" class="form-control form-control-sm"/>
                 </div>
                 <div class="mb-3 col-md-3">
                     <button type="submit" class="btn d-inline-flex btn-sm btn-danger mx-1 justify-content-lg-end" id="remove">
                         <i class="bi bi-trash"></i>
                     </button>
                 </div>
             </div>
         `)
     });
 </script>

Voici le formulaire en HTML

<div class="row">
                                         <div class="col-md-3">
                                             <input type="text" class="form-control form-control-sm nom_article" name="nom_article" id="nom_article" autocomplete="off" placeholder="Entrer le nom d'un article" >
                                         </div>
                                         <div class="mb-3 col-md-3">
                                             <button type="submit"  class="btn d-inline-flex btn-sm btn-primary mx-1 justify-content-lg-end" id="addMore">
                                                 <i class="bi bi-plus-lg"></i>
                                             </button>
                                         </div>
                                     </div>
                                     <div class="row">

                                         <div class="mb-3 col-md-3">

                                                 <label for="" class="form-label fw-bold">Nom article</label>

                                         </div>
                                         <div class="mb-3 col-md-3">

                                                 <label for="" class="form-label fw-bold">Qte</label>

                                         </div>
                                         <div class="mb-3 col-md-3">

                                                 <label for="" class="form-label fw-bold">Prix</label>

                                         </div>
                                     </div>

Mon souhait est qu'à chaque fois je cliquerai sur le bouton plus, il va récupérer le nom, le prix et l'idée de l'article dans une aligne.

Mon souci est que: je n'arrive pas à les noms des articles sur plusieurs lignes

Besoin de vous pour m'en sortir