Показать / Скрыть Div как наложение

Question

Я пытаюсь создать наложения изображений, которые можно включать и выключать нажатием кнопки.По сути, у меня есть одно основное изображение, затем я хочу нажать кнопку A, чтобы наложение поверх A отображалось поверх основного изображения, и нажмите кнопку B, а наложение A уходило и показывало наложение B.

В настоящее время я пытаюсь сделатьэто путем создания скрытого div с фоновым изображением.Текущий код работает для первой кнопки в списке, но не для других.

<div class="hide schoolContent" id="schools"

</div>

<div class ="hide recreationContent" id="recreation">

</div>


<div class="hide restaurantsContent"id="restaurants">

</div>


<div class="hide banksContent" id="banks">

</div>


<div class="hide groceriesContent"id="groceries">

</div>


<div class="hide transportationContent"id="transportation">

</div>


<div class="hide libraryContent" id="library"></div>

<div>

<button  class="alertName" name="schoolContent">Schools</button>

<button  class="alertName" name="recreationContent">Recreation</button>

<button  class="alertName" name="restaurantsContent">Restaurants</button>

<button  class="alertName" name="banksContent">Banks</button>

<button  class="alertName" name="groceriesContent">Groceries</button>

<button  class="alertName" name="transportationContent">Study Transportation</button>

<button  class="alertName" name="libraryContent">Library</button>
</div>


<script>var alertName = document.getElementsByClassName("alertName");

var myFunction = function() {

var hide = document.getElementsByClassName("hide");

for (var i =< 0; i < hide.length; i++) {

hide[i].style.display = "none";

}

var name = this.getAttribute("name");

var show = document.querySelector('.' + name);

if (show.style.display = "none") {

show.style.display = "block";

}

else {

show.style.display = "none";

}

};

for (var i = 0; i < alertName.length; i++) {

alertName[i].addEventListener('click', myFunction);

}</script>