Я пытаюсь создать страницу викторины. на странице должны быть динамические входы. не существует определенного количества вопросов и количества ответов на каждый вопрос. для добавления вопроса, я использую bootstrap аккордеон, и это работает. после нажатия добавить вопрос он добавляет новый аккордеон и входы внутри. но при загрузке второго уровня больше после нажатия кнопки ничего не происходит. также я хочу динамически добавлять ответы. Я использую те же логи c. после нажатия кнопки #question я создаю HTML элемент объявления, пытающийся добавить его в answersAccordion. jQuery событие клика не работает.
$(document).ready(function () {
var next = 0;
$("#add-more").click(function(e){
e.preventDefault();
let _html = '';
_html+='<div class="card">';
_html+='<div class="card-header" id="heading'+next+'">';
_html+='<h5 class="mb-0">';
_html+='<button class="btn btn-link" data-toggle="collapse" data-target="#collapse'+next+'" aria-expanded="true" aria-controls="collapse'+next+'">';
_html+='Quiz question: '+next;
_html+='</button>'
_html+='</h5>';
_html+='</div>';
_html+='<div id="collapse'+next+'" class="collapse" aria-labelledby="heading'+next+'" data-parent="#accordion">';
_html+='<div class="card-body">';
_html+='<input form="myform" type="text" name="questions[][question]">'
_html+='<input form="myform" type="file" name="questions[][image]">'
_html+='<div class="col-md-3">';
_html+='<button id="question" name="add-question" class="btn btn-primary">Add Question</button>'
_html+='<div id="answersAccordion">';
_html+='</div>';
_html+='</div>';
_html+='</div>'
_html+='</div>'
_html+='</div>'
$('#accordion').append(_html);
next+=1;
});
$("#question").click(function(e){
console.log(12121)
let _html = '';
_html+='<div class="ml-5">'
_html+='<input type="text" name="questions[][answers][][title]">';
_html+='<textarea name="questions[][answers][][description]"></textarea>';
_html+='<input type="file" name="questions[][answers][][image]" ';
_html+='</div>'
$(this).next().append(_html);
console.log($(e))
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<div class="col-md-12">
<button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
</div>
</div>
<form id="myform" method="post" action="post.php" enctype="multipart/form-data">
<button>send</button>
</form>
<div class="col-xs-12">
<div class="col-md-12" >
<h3> Actions</h3>
<div id="accordion">
</div>
</div>
</div>
</body>
</html>
console.log также не работает в консоли, ошибки нет