Зачем добавлять текст after () каждый раз дважды по клику, используя jQuery?

Question

У меня есть несколько вопросов, когда я нажимаю на конкретный вопрос Add Answer Отображение кнопки. После отображения кнопки я нажимаю на кнопку, чтобы получить ответ в соответствии с вопросом, на который я уже нажал, используя jQuery after(), как указано ниже: -

Это работает, но не правильно

, когда я нажимаю на первый вопрос чем нажать на кнопку, это дать один ответ, это нормально

, но когда я нажимаю на второй вопрос, чем нажать на кнопку, дать ответ два раза, это не так

Я хочу просто один ответ на каждый вопрос, как я могу это сделать?

$(function(){
  $('button').hide();
  $('.questions').click(function(){
    $('button').show();
    var $QuestionClick = $(this);

  $('button').click(function(){
    $QuestionClick.after('<p>This is text</p>')
  });
  
  });
});

.questions{ background:#f1f1f1; border:#ccc; padding:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Add Answer</button>


<p class="questions">Question 1</p>
<p class="questions">Question 2</p>

Ответ будет оценен по достоинству!

Answer 1

Вы находитесь на правильном пути, вам просто нужно переместить функцию щелчка кнопки из другой функции щелчка.

$(function() {
  $('button').hide();
  var $QuestionClick
  $('.questions').click(function() {
    $('button').show();
    $QuestionClick = $(this);
  });
  $('button').click(function() {
    $QuestionClick.after('<p>This is text</p>')
  });
});

Демо

$(function() {
  $('button').hide();
  var $QuestionClick
  $('.questions').click(function() {
    $('button').show();
    $QuestionClick = $(this);
  });
  $('button').click(function() {
    $QuestionClick.after('<p>This is text</p>')
  });
});

.questions {
  background: #f1f1f1;
  border: #ccc;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Add Answer</button>


<p class="questions">Question 1</p>
<p class="questions">Question 2</p>