Why do both buttons call my function?

<modal>
  <form id="bingo-settings-list">
  [...]
    <button class="addGamePickerSelector-Button">Add game</button>

    <div>
      <button class="bingo-settings-submit-button" type="submit">Use settings</button>
      <button>Cancel</button>
    </div>
  </form>
</modal>

<modal>
  <form id="bingo-settings-list">
  [...]
    <button class="addGamePickerSelector-Button">Add game</button>

    <div>
      <button class="bingo-settings-submit-button" type="submit">Use settings</button>
      <button>Cancel</button>
    </div>
  </form>
</modal>

document.querySelector("#bingo-settings-list").addEventListener("submit", function(){
        event.preventDefault();
        //createBingoTable();
        console.log("im submitted")
    })

document.querySelector("#bingo-settings-list").addEventListener("submit", function(){
        event.preventDefault();
        //createBingoTable();
        console.log("im submitted")
    })