Как выбрать несколько объектов класса для манипуляции css

Это может быть простой вопрос или что-то, что невозможно. Я пытаюсь использовать функцию querySelector() для выбора объектов определенного класса для манипуляции css. У меня есть несколько объектов разных классов, и я использую ссылки в моей основной навигации для переключения объектов в зависимости от того, какая ссылка нажата.

Для этого я использую комбинацию php и jQuery.

Это то, что работает для одного объекта:

Php/HTML:

<div class="red box">Lorum</div>
<div class="blue box">Ipsum</div>
<div class="blue box">Ipsum</div>

Мой nav php (я попытался упростить то, что я делаю, чтобы сделать здесь более понятным):

$value = "blue";
echo "<a href=\"#\" onclick=\"document.querySelector('.".$value."').classList.toggle('hover');\">Link</a>";

Действие hover соответствует моему css, связанному ранее в моем php, и является простым флипом.

Что в итоге происходит, так это правильно для первого объекта с заданным классом, но не для каких-либо других объектов с этим классом. Я пробовал использовать querySelectorAll() и getElementByClassname(), но я не знаю, выполняю ли я это неправильно, или я пытаюсь сделать что-то, что на самом деле невозможно. Является ли написать функцию лучшим способом для этого?

Какие-либо предложения? Любая помощь будет оценена по достоинству. Благодарю.