Hiding column#2 in a side-by-side Question, and revealing it upon selection of choices in column#1

Use this JS:
Qualtrics.SurveyEngine.addOnReady(function () {
    let quest = this;
    
    // Hide SBS2 to start with
    quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());

    quest.questionContainer.onclick = function () {
        setTimeout(() => {
            let all_checked = quest.questionContainer.querySelectorAll(".q-checked");
            
            // Show SBS2 if both are the same
            if (
                all_checked.length == 2 &&
                all_checked[0].parentElement.className == all_checked[1].parentElement.className
            ) {
                quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.show());
            } else { // Hide SBS2 otherwise
                quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());
            }
        }, 100);
    };
});

You may want to explore some aesthetic related customizations also.

Thank you so much, ahmedA. Your solution is able to hide and show column#2 according to the conditions.
However, it hides column#2 again when I select one of the radio buttons. I tried to adjust the first condition (please see below), but I not sure how to restrict the second condition to only column#1.
Could you advise please? Thank you!
Qualtrics.SurveyEngine.addOnReady(function () {
    let quest = this;
    
    // Hide SBS2 to start with
    quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());

    quest.questionContainer.onclick = function () {
        setTimeout(() => {
            let all_checked = quest.questionContainer.querySelectorAll(".q-checked");
            
            // Show SBS2 if both are the same
            if (
                all_checked.length >= 2 &&
                all_checked[0].parentElement.className == all_checked[1].parentElement.className
            ) {
                quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.show());
            } else { // Hide SBS2 otherwise
                quest.questionContainer.querySelectorAll(".SBS2").forEach((item) => item.hide());
            }
        }, 100);
    };
});

Hi ahmedA,
Yes, it works fine. Thanks a lot!

Very nice code. Thank you!