durfdoen-2.0/layouts/partials/question.erb

<h2> <%= question[:vraag] %> </h2>
<select id="<%= (question[:tekst] || "") + (question[:vraag] || "") %>_option">
    <option value="" selected="selected disabled hidden">Maak uw keuze</option>
    <% for answer in question[:antwoorden]%>
        <option value='<%= answer[:tekst] + (answer[:vraag] || "") %>'>
            <%= answer[:tekst] %>
        </option>
    <% end %>
</select>
<% for answer in question[:antwoorden]%>
    <% if answer[:vraag] %>
        <div id='<%= answer[:tekst] + answer[:vraag] %>' style="display:none;">
            <%= render '/partials/question.*', question: answer  %>
        </div>
    <% end %>
<% end %>

<script>
{
    // Reference back to the last selected option
    // This way we can 'deselect' the question results
    let last_answered = null;

    // Create list of all subquestions
    const sub_questions = {};
    // Create list of all student organisations this answer entails
    const question_results = {};

    <% for answer in question[:antwoorden] %>
        <% if answer[:vraag] %>
            sub_questions['<%= answer[:tekst] + answer[:vraag] %>'] = document.getElementById('<%= answer[:tekst] + answer[:vraag] %>');
        <% end %>

        question_results['<%= answer[:tekst] + (answer[:vraag] || "") %>'] = [];
        <% if answer[:verenigingen] %>
            <% for vereniging in answer[:verenigingen] %>
                question_results['<%= answer[:tekst] + (answer[:vraag] || "") %>'].push(
                    "<%= vereniging[:naam] %>"
                );
            <% end %>
        <% end %>
    <% end %>

    document.getElementById("<%= (question[:tekst] || "") + (question[:vraag] || "") %>_option").addEventListener('change', (event) => {
        if (last_answered && sub_questions[last_answered]) {
            sub_questions[last_answered].style.display = "none";

            // sub is the select dom element, that listens for changes
            // When a parent is changed, it should notify it's last_answered child that it is changed
            const sub = document.getElementById(last_answered+"_option");
            if (sub) {
                sub.value = null;
                sub.dispatchEvent(new event.constructor(event.type, event));
            }
        }

        // Update results
        save_answers(question_results[event.target.value] || []);
        del_answers(question_results[last_answered] || []);

        // Make possible sub question visible
        const quest = sub_questions[event.target.value];
        last_answered = event.target.value;
        if (quest) {
            delete quest.style.removeProperty("display");
        }
    });
}
</script>