Как сделать два разных списка вкладок с одним и тем же JS?

Question

[relows]

Нужно на одним сайте использовать один js

function openCity(evt, cityName) {
                    var i, tabcontent, tablinks;
                    tabcontent = document.getElementsByClassName("tabcontent");
                    for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                    }
                    tablinks = document.getElementsByClassName("tablinks");
                    for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                    }
                    document.getElementById(cityName).style.display = "block";
                    evt.currentTarget.className += " active";
                    }

                    // Get the element with id="defaultOpen" and click on it
                    document.getElementById("defaultOpen").click();

Когда я делаю второй список табов получается, что кнопки для каждого списка табов работают вместе
HTML такой:

<div class="container">
					<div class="tabs">
						<div class="opened">
							<div id="Tab1" class="tabcontent">
								<img src="{.//property[@name='slide1']/value}" alt="" />
								</div>

								<div id="Tab2" class="tabcontent">
									<img src="{.//property[@name='slide2']/value}" alt="" />
									</div>

									<div id="Tab3" class="tabcontent">
										<img src="{.//property[@name='slide3']/value}" alt="" />
										</div>

										<div id="Tab4" class="tabcontent">
											<img src="{.//property[@name='slide4']/value}" alt="" />
											</div>

											<div id="Tab5" class="tabcontent">
												<img src="{.//property[@name='slide5']/value}" alt="" />
												</div>
											</div>

											<div class="tab1">
												<button class="tablinks" onclick="openCity(event, 'Tab1')" id="defaultOpen"><img src="{.//property[@name='slide01']/value}" alt="" /></button>
												<button class="tablinks" onclick="openCity(event, 'Tab2')"><img src="{.//property[@name='slide02']/value}" alt="" /></button>
												<button class="tablinks" onclick="openCity(event, 'Tab3')"><img src="{.//property[@name='slide03']/value}" alt="" /></button>
												<button class="tablinks" onclick="openCity(event, 'Tab4')"><img src="{.//property[@name='slide04']/value}" alt="" /></button>
												<button class="tablinks" onclick="openCity(event, 'Tab5')"><img src="{.//property[@name='slide05']/value}" alt="" /></button>
											</div>
										</div>
									</div>

Answer 1

[fix0_o]

Вот рабочий вариант.
Думаю сам разберешься как этим пользоваться.
Стилизуй и вперед к свершениям.

<!--Первый аккордеон-->
<ul accordion='test'>
     <li><a href='1'>item1</a></li>
     <li><a href='2'>item2</a></li>
</ul>

<div test='1' style='display:none;'>
      ####item1####
</div>
<div test='2' style='display:none;'>
      ####item2####
</div>

<!--Второй аккордеон-->
<ul accordion='test2'>
     <li><a href='1'>item1!!!</a></li>
     <li><a href='2'>item2!!!</a></li>
</ul>

<div test2='1' style='display:none;'>
      ####item1!!!####
</div>
<div test2='2' style='display:none;'>
      ####item2!!!####
</div>

$(document).on('click', "[accordion]", function(event){
      event.preventDefault();
      event.stopPropagation();
      var target = event.target;
      var check = $(this).attr('accordion');
      $("["+check+"]").fadeOut(0);
      $("["+check+"='"+$(target).attr('href')+"']").fadeIn(300);    
});

Пример: