При нажатии кнопки значение ранее нажатой кнопки устанавливается пустым

Question

Я создал несколько кнопок в HTML, и у меня указана функция onclick. Когда я нажимаю кнопку, происходят правильные действия (значение изменяется, и т. Д. c.) Однако, когда я нажимаю другую кнопку, для ранее нажатой кнопки ее значение устанавливается равным нулю.

HTML Создание кнопки : (Я использую flask, так что вещи в {{}} заменяются)

<button type="button" id="{{ button.name }}" onclick="buttonClicked(this.id)">{{ button.name }}</button>

Javascript buttonClicked функция:

function buttonClicked(buttonID){
     console.log("button clicked (running from render.js)")
     Http.open("GET", "http://localhost:5000/buttonClicked/buttonClicked");
     Http.send();
     Http.onreadystatechange=(e)=>{
          console.log(Http.responseText)
          //buttonID.innerHTML = Http.responseText;
          el = document.getElementById(buttonID);
          el.innerHTML = String(Http.responseText);
     }
};

Я также попытался использовать <input> примерно так:

<input id="{{ button.name }}" type="button" onclick="buttonClicked(this.id)" value="RegA" />

Редактировать: пример того, что происходит при нажатии кнопки Первая кнопка:

<button type="button" id="button1" onclick="buttonClicked(this.id)"></button>

Вторая кнопка нажата:

<button type="button" id="button2" onclick="buttonClicked(this.id)">buttonClicked returned from python</button>

Answer 1

Вы должны создать отдельный объект XMLHttpRequest для каждого события щелчка внутри функции buttonClicked.

function buttonClicked(buttonID) {
    let Http = new XMLHttpRequest();
    console.log("button clicked (running from render.js)")
    Http.open("GET", "http://localhost:5000/buttonClicked/buttonClicked");
    Http.send();
    // ....
}

https://jsfiddle.net/gh68qrtx/