title: My ajax query is repeated how many times I open my modal (Select Dynamic)
body: <p>So, I have a project in laravel and now i'm working on the CRUD, specifically in the Update. Here I've a btn modal that show me the dates for edit and there I´ve a select dynamic.</p>
  <p>The table with the btn:</p>
  <pre><code>@foreach ($mascotas as $mascota)
    &lt;tr&gt;
       &lt;td class=&quot;text-center&quot;&gt;{{$mascota-&gt;name}}&lt;/td&gt;
       &lt;td class=&quot;text-center&quot;&gt; {{$mascota-&gt;especie}}&lt;/td&gt;
       &lt;td class=&quot;text-center&quot;&gt;{{$mascota-&gt;raza}}&lt;/td&gt;
       &lt;td&gt; &lt;button class=&quot;btn btn-warning&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modalEditCli&quot; 
        onclick=&quot;modalEdit('{{$mascota-&gt;id}}', '{{$mascota-&gt;name}}', '{{$mascota-&gt;especie}}', 
        '{{$mascota-&gt;razaId}}', '{{$mascota-&gt;raza}}')&quot;&gt; &lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; &lt;/button&gt;
       &lt;/td&gt;
    &lt;/tr&gt;
  @endforeach
  @include('mascotas.modal_editar')
  </code></pre>
  <p>So, in the btn I'm calling the modal and the JS function at the same time.</p>
  <p>The modal:</p>
  <pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;modalEditCli&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;form action=&quot;{{route('mascotas.store')}}&quot; method=&quot;get&quot; class=&quot;formularin&quot;&gt; @csrf
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-4&quot;&gt;
                              &lt;div class=&quot;mb-3&quot;&gt;
                                  &lt;label for=&quot;name&quot; class=&quot;form-label&quot;&gt;&lt;b&gt;Nombre Mascota:&lt;/b&gt; &lt;span class=&quot;text-secondary&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                                  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;mascota_nm&quot; id=&quot;mascota_nm&quot; value=&quot;&quot; required&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-4&quot;&gt;
                              &lt;div class=&quot;mb-3&quot;&gt;
                                  &lt;label for=&quot;especie&quot; class=&quot;form-label&quot;&gt;&lt;b&gt;Especie:&lt;/b&gt; &lt;span class=&quot;text-secondary&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                                  &lt;select class=&quot;form-control especie&quot; name=&quot;especie&quot; id=&quot;especie&quot; required&gt;
                                      &lt;option name=&quot;especie&quot; value=&quot;0&quot;&gt;Otro...&lt;/option&gt;
                                      &lt;option name=&quot;especie&quot; value=&quot;1&quot;&gt;Perro&lt;/option&gt;
                                      &lt;option name=&quot;especie&quot; value=&quot;2&quot;&gt;Gato&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-4&quot;&gt;
                              &lt;div class=&quot;mb-3&quot;&gt;
                                  &lt;label for=&quot;raza&quot; class=&quot;form-label&quot;&gt;&lt;b&gt;Raza:&lt;/b&gt; &lt;span class=&quot;text-secondary&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                                  &lt;select class=&quot;form-control raza&quot; name=&quot;raza&quot; id=&quot;raza&quot; required&gt;
                                      &lt;option value=&quot;0&quot;&gt;Otro...&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                      &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-bs-dismiss=&quot;modal&quot;&gt;Cerrar&lt;/button&gt;
                      &lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt; &lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt; Editar&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And here my JS function for the Select:</p>
  <pre><code>&lt;script&gt;
      function modalEdit(id, name, especie, razaId, raza){
              $('#id').val(id);
              $('#mascota_nm').val(name);
              $('.especie').val(especie);
              $(&quot;.raza&quot;).prop('disabled', true); // Aplica el atributo &quot;disabled&quot; en el select.
              $(&quot;.raza&quot;).html(&quot;&lt;option value='&quot;+ razaId +&quot;'&gt;&quot;+ raza +&quot;&lt;/option&gt;&quot;); // Limpia los datos del Select y solo deja la raza.
              $(&quot;.especie&quot;).change(function(){
                  $(&quot;.raza&quot;).html(&quot;&lt;option value='0'&gt;Otro...&lt;/option&gt;&quot;); // Limpia los datos del Select y solo deja la opcion &quot;Otro...&quot;
                  var selectEspe = $('.especie').val();
                  $.post({
                      url: '/mascotas/dinamicQuery',
                      method: 'POST',
                      data: {
                          selectEspe,
                          _token: $('input[name=&quot;_token&quot;]').val()
                      }
                  }).done(function(res){
                      $(&quot;.raza&quot;).prop('disabled', false); // Elimina el atributo &quot;disabled&quot;
                      var razas = JSON.parse(res);        // Lee el archivo Json
                      $.each(razas, function(key, value){
                          var consulta = $(&quot;.raza&quot;).append('&lt;option name=&quot;' + value.id + '&quot;&gt;' + value.raza + '&lt;/option&gt;');
                      });
                  });
              });
          }
      &lt;/script&gt;
  </code></pre>
  <p>And for last the Laravel query:</p>
  <pre><code>public function dinamicQuery(Request $request){
     $especie = $request-&gt;selectEspe;
     $razas = Especie::all()-&gt;where('especie', '=', $especie);
     return response(json_encode($razas))-&gt;header('Content-type', 'text/plain');
  }
  </code></pre>
  <p>So, the js query and the rest is working, if I open my modal it once the js query runs perfectly. But the problem is when I open any modal edit of the table for a second time o more. The &quot;each&quot; of my js query it runs as many times as modal is opened and I don´t know how why or how I can stop it.</p>
  <p>Thanks for everything!</p>