在动态附加的div内动态附加文本框？

Question

我有一个手风琴div，其中包含用于输入问题和答案的字段。当我单击“添加问题”按钮时，将附加相同的div。所有这些都工作正常。我还有一个+图标可以动态输入选项。

当我单击+按钮时，该附加的div中仅附加了一个文本框。 以下是我的JS代码。每当我单击“添加问题”按钮时，我的div都会被追加。但是，当我单击添加选项ID时，文本框无法正确追加。

我的div附加在ajax成功内部

我的JS

var i =2;
$('#addQuestion').click(function() {
    var img_url= $("#img_url").val();
    var options="";
    var k=4;var j=4;
    $.ajax({
        url: site_base_url+ '/sur/getQTypes',
        type: "get",
        contentType: "application/json",dataType: "json",
        success: function(data){ // What to do if we succeed
            if(data){
                $("#here").append(
                    '<div class="form-group row">' +
                      '<div class="col-md-4 position-relative">' +
                        '<input class="form-control" name="answer" placeholder="OPTION 3">' +
                          '<a id="add-option'+j+'" ><img src="'+img_url+'" alt=""></a>' +
                      '</div>' +
                    '</div>'+
                  '<div id="appendOptions'+k+'"></div>' 
                );

                $(".group:last").accordion({
                    header: "> h3",
                    collapsible: true,
                });

                i++;

                $("#add-option"+j).click(function(){
                    $("#appendOptions"+k).append(
                        '<div class="form-group row"><div class="col-md-4"><input class="form-control" name="answer" placeholder="OPTION '+k+'"></div></div>'
                    );
                    k++;
                    j++;
                });
            }
        });