Hiding side-by-side statements pending previous statement answer

Qualtrics.SurveyEngine.addOnReady(function () {
quest = this;
let qc = quest.questionContainer;
let all_rows = qc.querySelectorAll(".Choice");
for (let i = 1; i < all_rows.length; i++) {
all_rows[i].hide();
}
let no_id =
"." + qc.querySelectorAll(".q-radio")[1].parentElement.className.match(/c\\d+/gm).join();
no_id = Number(
qc
.querySelector(no_id + ":not(th)")
.querySelector("input")
.id.split("~")[3]
);
quest.questionclick = function (ev, el) {
if (el.className) {
let row = Number(el.id.split("~")[2]);
let choice = Number(el.id.split("~")[3]);
if (choice == no_id && row < all_rows.length) {
all_rows[row].show();
} else if (choice == no_id && row == all_rows.length) {
alert("Max Rows.");
}
}
};
});

Thanks ahmedA!
This is almost what I needed but not quite.
When I tested the question, the subsequent statement was shown as soon as I chose my second response option in the first column (MODE) from the first statement's dropdown menu, instead of only when I chose "No" in the third column. This happened for all of the statements but only when I chose the second response option, not any other response options from the MODE column. How can I fix that please?
At present, only 4 of my 5 statements are showing with the last (statement 5) not displaying after the alert of Max Rows comes up. How can I change that to display the fifth statement?
Also, I originally had a maximum of 5 statements that could be filled with a free text box question to follow if they had anything else to add. Given this coding above allows me to show only the number of statements required, I might remove that text box option and just increase the number of statements to 10 for example. How can I tweak the number of statements shown to 10 please?
Thanks again for all of your help!

I can't replicate your issue about the mode. See this demo.
The last row not being shown is due an oversight on my part. Please delete the

-1

all_rows.length - 1

Thank you for this!
I just tried out your demo and when I select 'Answer 2' in Column A, B or C, the next statement appears. I only want the next statement to appear if answer 2 is selected in Column C. Is there a way to do that?

2021-03-17 10-29-25.zipNot for me. See the attached screengrab

https://www.qualtrics.com/community/discussion/comment/35711#Comment_35711How strange!
This is what I see (sorry, only images!):

Which browser are you using?

Firefox here.
I'm assuming though, if it happened for me, then in my live survey, there's a chance it could potentially happen for users also, either in Firefox or on various mobile devices?

Yes. I'm seeing it on Firefox also. Let me dig a little bit.
I'm only using Qualtrics' internal functions. And if there's a difference, this a cause of concern.

Thank you!!
That's fixed the problem and I've also worked out how to extend it to 10 statements, which is a HUGE help. Thanks so much!

Hi @ahmedA,

I’m rehashing this question for a new purpose but don’t know where/how to tweak the javascript to make it work properly.

The new question:

I have 10 rows available and when the answer ‘Yes’ is ticked for “Add another sport/activity?”, the next row appears (as planned). However, if I tick ‘Term 2’ under “When did they participate?” the next row appears then too! How can I fix this please?

This is the javascript:

Qualtrics.SurveyEngine.addOnload(function()
{
        quest = this;
    let qc = quest.questionContainer;
    let all_rows = qc.querySelectorAll(".Choice");
    for (let i = 1; i < all_rows.length; i++) {
        all_rows[i].hide();
    }
    let no_id =
        "." + qc.querySelectorAll(".q-radio")[1].parentElement.className.match(/c\d+/gm).join();
    no_id = Number(
        qc
            .querySelector(no_id + ":not(th)")
            .querySelector("input")
            .id.split("~")[3]
    );
    quest.questionclick = function (ev, el) {
        if (el.className) {
            let row = Number(el.id.split("~")[2]);
            let choice = Number(el.id.split("~")[3]);
            if (choice == no_id && row < all_rows.length) {
                all_rows[row].show();
            } else if (choice == no_id && row == all_rows.length) {
                alert("That's a lot of sports/physical activity classes outside of school! Please use the text box on the next page to record any additional sports/physical activity classes your child participated in over the past year.");
            }
        }
    };/*Place your JavaScript here to run when the page loads*/

});

Hi all. 

This has been working a treat for ages...but suddenly stopped. Now, when I hit ‘no’, the next line does not display. This is in Chrome; I haven’t yet tested other browsers. Any ideas??

This survey is live, so need to get this updated asap please!

Thanks,
​​​​​​​Kate.

Could something like this have happened again as it’s suddenly stopped working - the next lines do not appear whatever is clicked. @ahmedA , are you able to assist please?