คือผมอยากเขียนให้เวลาเรากดที่ป้าย T1 ก็จะมีรายการ Item 1 ขึ้นมา กด T2 ก็มี Item 2 ขึ้นมาแทนที่ แต่ปัญหาคือ ผมเพิ่ม/ลบ Class Active เป็นแค่ Element เดียวกันครับ (Class ชื่อเดียวกัน) พอแยกกัน มันต้องตรวจว่ามี Active อยู่ไหม ถ้ามีให้ลบออกก่อน ผมก็ไปต่อไม่เป็นแล้ว (เช่นแยกเป็น Box 1-4) ตอนนี้คือทำได้แค่ไม่ว่ากดป้ายไหนมันก็ขึ้นแค่ Item 1 มีใครแนะนำได้บ้าง

อ่านแล้วไม่เข้าใจว่าต้องการทำอะไร
อธิบายไม่ค่อยชัด

edit:
ถ้าเข้าใจถูกคือจะลูป ul item-1, item-2, etc เพื่อที่จะได้ add/remove active class

ลองแบบนี้ก็ได้ document.querySelectorAll('#item-container > ul')

ลองถามในกลุ่มพวกโปรแกรมเมอร์ดูครับ เมื่อวานผมก็โพสถามไปก็มีคนมาช่วยเหลือเยอะอยู่
https://www.facebook.com/groups/134855003271201
https://www.facebook.com/groups/ThaiPGAssociateSociety/

ก็ลบ active ทุกตัวก่อนครับ ไม่ต้องสนว่ามันมี active อยู่ไหม เพราะผลลัพธ์คือเราต้องการ active ตัวเดียว อยู่แล้ว

แล้วค่อยเพิ่ม active ตัวที่กด แค่นั้นเลย

Click -> removeAllActives -> add active class to that element

อ่านแล้วงงๆเหมือนกันครับ แต่คิดว่า removeall ก่อนน่าจะได้นะ

ถ้าไม่ได้จะเอาตัวที่ active ไปใช้งาน ก็ลบออกทุกตัวไปเลย ไม่ต้องไปเช็คว่า active แล้วถึงเอาออก แล้วค่อยเซ็ต active ใหม่แค่ตัวที่คลิ๊ก

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {

  box.addEventListener('click', (e) => {

    // บรรทัดนี้เรียกลบ class active ออกให้หมดก่อน เพราะเราจะใส่ class อีกครั้งอยู่ดี

    removeAll();

    // บรรทัดนี้ใส่ class active ตรง element ปัจจุบัน

    e.srcElement.classList.add('active');

  })

})



const removeAll = () => {

  boxes.forEach(box => {

    box.classList.remove('active');

  });

}

แค่นี้ก็พอมั้งครับ

ใช้ Collaps ของ bs5 ก็ได้ครับ

let boxes = document.querySelectorAll(".box");

for(const box of boxes){
box.addEventListener("click", (e) => {
e.preventDefault();
const item = box.getAttribute("data-item");
document.querySelector(".item-1").classList.remove('active');
document.querySelector(".item-2").classList.remove('active');
document.querySelector(".item-3").classList.remove('active');
document.querySelector(".item-4").classList.remove('active');
document.querySelector(".item-"+item).classList.add('active');

document.querySelector(".box.active").classList.remove('active');
box.classList.add('active');
});
}

น่าจะประมาณนี้มั้งครับ