Qualtrics "add choice" button for respondents not working

Question

I used the helpful code on this thread: "Add choice" button for respondents in Qualtrics

Code:

var that=this.questionId;
    jQuery("#"+this.questionId+" tr.ChoiceRow:not(:lt(1))").hide();
    jQuery("<input type='button' id='add' value='Add field' name='+' />").insertAfter("#"+this.questionId+" tr.ChoiceRow:last");
    jQuery("#add").on('click',function(){
        var c= jQuery("tr.ChoiceRow:visible").length;
        jQuery("#"+that+" tr.ChoiceRow:eq("+c+")").show(); 
    });

I am using this code for two questions on the same page (screenshot below). However, if I add 2 responses to the first question, it generates 2 form fields for the next.

It seems like the code is feeding into/linked to the next question? How can I avoid this so that respondents can make a combination of responses?

Thank you all!

// Expected code to run individually

Answer 1

An element id (id='add') must be unique on a page. Use a class instead:

var that=this.questionId;
jQuery("#"+this.questionId+" tr.ChoiceRow:not(:lt(1))").hide();
jQuery("<input type='button' class='add' value='Add field' name='+' />").insertAfter("#"+this.questionId+" tr.ChoiceRow:last");
jQuery("#"+this.questionId+" .add").on('click',function(){
    var c= jQuery("tr.ChoiceRow:visible").length;
    jQuery("#"+that+" tr.ChoiceRow:eq("+c+")").show(); 
});