Comment puis-je effacer une valeur stockée dans une fonction Form.Submit

Le problème est que je tente de resoumettre un formulaire sans rafraîchir la page que le gestionnaire d'événements pour la soumission de formulaire conserve la valeur de la soumission précédente.

Le formulaire contient un élément sélectionné qui est peuplé avec des options d'une API. L'option sélectionnée est utilisée pour effectuer une URL de demande et obtenir des données de l'API. Lorsque le formulaire est soumis une seconde fois sans rafraîchir le formulaire. Soumettre le gestionnaire d'événements construit une URL avec la valeur précédente, puis il construit une URL avec la valeur nouvellement sélectionnée. J'ai essayé d'être réinitialisé sur le formulaire qui réinitialise l'élément Select à son état initial, mais cela ne efface pas la valeur précédemment sélectionnée dans le gestionnaire d'événements de soumission. P>

let $select = $(".breeds");

$select.append($(`<option>select breed</option>`))

for (var i=0; i<=breeds.length; i++){
  $select.append($(`<option></option>`).text(breeds[i]).html(breeds[i]))
}

$('.breeds').on('change', function(){
  console.log('on change running')
  let breed = $(".breeds :selected").text()
  console.log(`breed in on change: ${breed}`)
  watchForm(breed) 
})

function watchForm(breed) {
  console.log(`watchForm running`)
  console.log(`breed in watchform is: ${breed}`) //here breed logs as the value for first submission and then the second submission

  $('form').submit(event => {
    console.log(`breed in form submit is ${breed}`)
    event.preventDefault();
    //console.log(`num is ${num}`)
    getDogImage(breed);
    $('#myform').get(0).reset()
  });
}