Как сделать так, чтобы при нажатии на кнопку изменялся цвет блока div?

У меня есть HTML-код:

<div class="block">
          <form method="post">
          <p>Имя:</p>
          <p>Курс:</p>
          <p>Город:</p>
          <input type="button" name="grey" value="red" id="red">
          <input type="button" name="red" value="blue" id="blue">
          </form>
          </div>

<style>
.block {
            backgroung: red;
            width: 600px;
            height: 200px;
            margin: 0 auto;
            padding-top: 5px;
            margin-bottom: 20px;
        }

.block p {
            margin-left: 10px;
        }
</style>

Нужно сделать так, чтобы блок <div class="block"> менял свой цвет при нажатии на кнопку <input type="button" name="grey" value="red" id="red"> либо <input type="button" name="red" value="blue" id="blue">.

Для этого я написал код на JS:

const div = document.querySelector('.block');
const btnRed = document.querySelector('#red');
const btnBlue = document.querySelector('#blue');
    
btnRed.addEventListener('click', () => {
    div.style.backgroundColor = "red";
})

btnBlue.addEventListener('click', () => {
    div.style.backgroundColor = "blue";
})

и он работает, но только для первого блока div. Как это исправить? Я новичек во фронтэнде и реально не знаю, что можно сделать. Заранее спасибо!