Как предотвратить добавление двойного ввода с помощью кнопки onclick

Question

Привет, ребята, поэтому, когда я пытаюсь добавить вопрос и ответы, этот код работает. Но если я задал 2 вопроса и хочу добавить ответ, то в поле ОБА вопроса появится дополнительное поле «ответ». Но, конечно, я только хочу добавить поле ответа к кнопке «вопрос», на которую я нажал

var question = 0;
function add_question() {
    question++;
    var allquestions = document.getElementById('all_questions')
    var divquestion = document.createElement("div");
    divquestion.innerHTML = `
                        <div id="all_questions">
                            <div class="form-group">
                                <label for="question" class="col-form-label">Question `+ question + `:</label>
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
                                    <input type="text" class="form-control" name="question">
                                </div>
                            </div>  
                            
                                <div class="form-group mx-5">
                                    <label for="answer" class="col-form-label">answer 1:</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
                                        <input type="text" class="form-control" name="answer">
                                    </div>
                                </div> 
                                <div class="form-group mx-5">
                                    <label for="title" class="col-form-label">answer 2:</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
                                        <input type="text" class="form-control" name="answer">
                                    </div>
                                </div>  
                            <div id="all_answers">   
                            </div>
                            <button type="button" class="btn btn-success m-1" onclick="add_answer()">add answer</button> 
                            <hr>   
                        </div>
                    `;
    allquestions.appendChild(divquestion)
}

var answer = 2;
function add_answer() {
    answer++;
    var allanswers = document.getElementById('all_answers')
    var divanswer = document.createElement("div");
    divanswer.innerHTML = `
                    <div class="form-group mx-5">
                        <label for="title" class="col-form-label">answer ` + answer + `:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
                            <input type="text" class="form-control" name="answer">
                        </div>
                    </div>
                    `;
    allanswers.appendChild(divanswer)
}

<div class="modal-body">             
            <div class="row">
                <div class="col">
                    <form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data"> 
                        <div class="form-group">
                            <label for="title" class="col-form-label">Title:</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
                                <input type="hidden" name="hiddenSurveyGet"/>
                                <input type="text" class="form-control" name="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description" class="col-form-label">Description:</label>
                            <textarea type="text" class="form-control" rows="4" name="description"></textarea>
                        </div>
                        <div class="list-group" id="myList">  
                            <a class="list-group-item active main-color-bg">Survey:</a>         
                        </div>  
                            <button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>  
                        <div id="all_questions">
                        <!-- this is the place where all questions get included with javascript -->
                        <hr>   
                        </div>
                        <button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button> 
                    </form>
                </div> 
            </div>
        </div>

Если что-то неясно, я попытаюсь объяснить это. Пожалуйста, не будь резким, я довольно новичок в JavaScript ...

Answer 1

Все, что вам нужно было сделать, это указать в контейнере вопросов идентификатор для размещения ваших ответов в функции добавления ответа. Я просто использовал приращение вопроса в качестве идентификатора и добавил его к идентификатору <div id="all_answers_${id}"> и передал идентификатор вфункция щелчка onclick="add_answer(${id})".

var question = 0;
function add_question() {
    question++;
    var allquestions = document.getElementById('all_questions')
    var divquestion = document.createElement("div");
    var id = question;
    divquestion.innerHTML = `
                            <div id="all_questions">
                                <div class="form-group">
                                    <label for="question" class="col-form-label">Question `+ question + `:</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
                                        <input type="text" class="form-control" name="question">
                                    </div>
                                </div>  
                                
                                    <div class="form-group mx-5">
                                        <label for="answer" class="col-form-label">answer 1:</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
                                            <input type="text" class="form-control" name="answer">
                                        </div>
                                    </div> 
                                    <div class="form-group mx-5">
                                        <label for="title" class="col-form-label">answer 2:</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
                                            <input type="text" class="form-control" name="answer">
                                        </div>
                                    </div>  
                                <div id="all_answers_${id}">   
                                </div>
                                <button type="button" class="btn btn-success m-1" onclick="add_answer(${id})">add answer</button> 
                                <hr>   
                            </div>
                    `;
  allquestions.appendChild(divquestion)
}

    var answer = 2;
    function add_answer(id) {
        answer++;
        var allanswers = document.getElementById('all_answers_'+id)
        var divanswer = document.createElement("div");
        divanswer.innerHTML = `
                        <div class="form-group mx-5">
                            <label for="title" class="col-form-label">answer ` + answer + `:</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
                                <input type="text" class="form-control" name="answer">
                            </div>
                        </div>
                        `;
        allanswers.appendChild(divanswer)
    }

    <div class="modal-body">             
                <div class="row">
                    <div class="col">
                        <form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data"> 
                            <div class="form-group">
                                <label for="title" class="col-form-label">Title:</label>
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
                                    <input type="hidden" name="hiddenSurveyGet"/>
                                    <input type="text" class="form-control" name="title">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="description" class="col-form-label">Description:</label>
                                <textarea type="text" class="form-control" rows="4" name="description"></textarea>
                            </div>
                            <div class="list-group" id="myList">  
                                <a class="list-group-item active main-color-bg">Survey:</a>         
                            </div>  
                                <button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>  
                            <div id="all_questions">
                            <!-- this is the place where all questions get included with javascript -->
                            <hr>   
                            </div>
                            <button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button> 
                        </form>
                    </div> 
                </div>
            </div>