How to bind 2 different input forms to 1 js handler?

Question

PHP

I have js that processes the click event and sends php
, but how to connect more inputs and submints to the existing js?
Everything should work in native JS.
here is the js WHICH PROCESSES THIS FORM

<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "/rabotay_picha.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);
</script>

<form method="POST" id="feedback-form">
Как к Вам обращаться:
<input type="text" name="nameFF" required placeholder="фамилия имя отчество" x-autocompletetype="name">
Email для связи:
<input type="email" name="contactFF" required placeholder="адрес электронной почты" x-autocompletetype="email">
Ваше сообщение:
<textarea name="messageFF" required rows="5"></textarea>
<input type="submit" value="отправить">
</form>

I need to add this form

<form>
            <label for="name">Имя:</label>
            <input type="text" id="name" class="input" placeholder="Ваше имя" />

            <label for="tell">Номер телефона:</label>
            <input type="tell" id="email" class="input" placeholder="Ваш номер телефона" />

            <input type="submit" class='btn' value="Отправить" />
          </form>

        <button class="btn-close" id="modal_close" type="button" aria-label="close">
          &times;
        </button>

how to do?

Answer 1

Throw all the code in a function and pass the form id into it, or use querySelector.
Here is an example via a function.

var sendForm = function(f, evt){
    var http = new XMLHttpRequest(), 
  	f = this;

   evt.preventDefault();
  
  http.open("POST", "/rabotay_picha.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
};

document.getElementById('feedback-form1').addEventListener('submit', function(evt){
    sendForm(this, evt);
}, false);

document.getElementById('feedback-form2').addEventListener('submit', function(evt){
    sendForm(this, evt);
}, false);