Add and remove class on multiple element when clicked

Question

I have the below as an example of what I'm working on; I'm trying to add a class to two elements when one of the elements is clicked.

 <div id="main"> <div id="section1"> - contents here - </div> <div id="section2"> - contents here - </div> <div id="section3"> - contents here - </div> <div class="plans-group"> <div class="plans-columns plans-type-1"> <div class="plans-col plans-left plans-heading">Heading</div> <div class="plans-col plans-right"> <div class="select-plan select-gold">Gold</div> </div> <!-- end plans-right --> </div> <!-- end plans-columns --> <div class="plans-columns plans-type-2"> <div class="plans-col plans-left plans-heading">Heading</div> <div class="plans-col plans-right"> <div class="select-plan select-silver">Silver</div> </div> <!-- end plans-right --> </div> <!-- end plans-columns --> <div class="plans-columns plans-type-3"> <div class="plans-col plans-left plans-heading">Heading</div> <div class="plans-col plans-right"> <div class="select-plan select-bronze">Bronze</div> </div> <!-- end plans-right --> </div> <!-- end plans-columns --> </div> <!-- end plans-group --> </div> <!-- end main -->

#1): DIV with class "select-plan"

When div with class "select-plan" is clicked, add class "clicked" to that div. When it's clicked again, remove the added class.

---

#2): DIV with id "main"

When "select-plan" is clicked (as explained above) also add class to the container div with id "main". And remove the added class when "select-plan" is clicked again.

This is where I have a problem because different classes have to be added to "main". For example:

1. When "select-gold" is clicked, add class "gold-selected" to "main"
2. When "select-silver" is clicked, add class "silver-selected" to "main"
3. When "select-bronze" is clicked, add class "bronze-selected" to "main"

I don't want previously clicked div to have its added class removed because another div is clicked. The added class should only be removed when that same div is clicked for the second time and so on...

Also, I might have up to 8 or more plans. The solution should not be limited to the 3 plans (Gold, Silver, and Bronze). I should have the ability to create more plans.

I really appreciate everyone's help with this. Thanks in advance.

Answer 1

let selectPlan = document.querySelectorAll('.select-plan');
        let mainDiv = document.getElementById('main');

        selectPlan.forEach(el =>{
            el.addEventListener('click',function(e){
                if(e.target.classList.contains('select-plan')){
                    e.target.classList.toggle('clicked');
                }
                if(e.target.classList.contains('select-gold')){
                    mainDiv.classList.add('gold-selected');
                    mainDiv.classList.remove('silver-selected');
                    mainDiv.classList.remove('bronze-selected');
                }else if(e.target.classList.contains('select-silver')){
                    mainDiv.classList.add('silver-selected');
                    mainDiv.classList.remove('gold-selected');
                    mainDiv.classList.remove('bronze-selected');
                }else{
                    mainDiv.classList.add('bronze-selected');
                    mainDiv.classList.remove('silver-selected');
                    mainDiv.classList.remove('gold-selected');
                }
            });
        });

Answer 2

let main = document.getElementById("main");
let select = document.querySelector(".select-plan");
let selectG = document.getElementsByName("gold");
let selectS = document.getElementsByName("silver");
let selectB = document.getElementsByName("bronze");

function toggleGold() {
    if (main.classList.contains('gold-select')) {
        main.classList.remove('gold-select');
    } else {
        main.classList.add('gold-select');
    }
    selectG[0].classList.toggle('cliqué')
}

//You can add same function for silver and bronze

document.querySelector(".select-gold").addEventListener("click", toggleGold);
document.querySelector(".select-silver").addEventListener("click", toggleSilver);
document.querySelector(".select-bronze").addEventListener("click", toggleBronze)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div name="gold" class="select-plan select-gold">Gold</div>
    <div name="silver" class="select-plan select-silver">Silver</div>
 <div name="bronze" class="select-plan select-bronze">Bronze</div>