I am trying to add multiple questions with multiple options, some question have 2 options some have 3 and so on. Please guide me what exactly I am doing wrong. Add more is working fine with for outer box but inner box having issues. Please check and help me thanks
<html lang="en">
<head>
<title>Add more</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.border {
border: 1px solid #000;
padding: 2rem;
border-radius: 5px;
margin-bottom: 5px;
box-sizing: border-box;
margin-top: 1rem;
}
.border.inner {
border-color: red;
}
</style>
</head>
<body>
<div class="container">
<form action="action.php" method="post">
<div class="long_box">
<div class="border">
<div class="row">
<div class="col-md-12">
<label>Question</label>
<textarea class="form-control" name="question[]"></textarea>
</div>
</div>
<div class="border inner">
<div class="row">
<div class="long_box_inner">
<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
</div>
<div class="col-md-12">
<br>
<input type="submit" class="long_add_more_inner btn btn-success" name="Submit" value="Add More Inner">
</div>
</div>
</div>
</div>
</div>
<input type="submit" class="long_add_more btn btn-success" name="Submit" value="Add more">
<input type="submit" class="btn btn-success" name="Submit" value="Submit">
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Add More Box
var long_max_fields = 10000;
var long_wrapper = $(".long_box");
var long_add_button = $(".long_add_more");
var lng = 1;
var lng_counter = 0;
$(document).on('click', ".long_add_more", function(e) {
e.preventDefault();
if (lng < long_max_fields) {
lng++;
lng_counter++;
htmloutputlng = "";
htmloutputlng += `
<div class="long_ajax_box">
<div class="border">
<div class="row">
<div class="col-md-12">
<label>Question</label>
<textarea class="form-control" name="question[]"></textarea>
</div>
</div>
<div class="border inner">
<div class="row">
<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
<div class="col-md-12">
<br>
<input type="submit" class="long_add_more_inner btn btn-success" name="Submit" value="Add More Inner">
</div>
</div>
</div>
<input type="submit" class="long_remove_button btn btn-danger" value="Remove">
</div>
</div>
`;
$(long_wrapper).append(htmloutputlng);
}
});
$(long_wrapper).on("click", ".long_remove_button", function(e) {
e.preventDefault();
$(this).closest('div.long_ajax_box').remove();
lng--;
});
// Add More Box Inner
var long_inner_max_fields = 10;
var long_inner_wrapper = $(".long_box_inner");
var long_inner_add_button = $(".long_add_more_inner");
var lng_inner = 1;
var lng_inner_counter = 0;
$(document).on('click', ".long_add_more_inner", function(e) {
e.preventDefault();
if (lng_inner < long_inner_max_fields) {
lng_inner++;
lng_inner_counter++;
htmloutputlng_inner = "";
htmloutputlng_inner += `
<div class="long_box_inner_ajax">
<div class="col-md-12">
<label>Question Option</label>
<textarea class="form-control" name="option[]"></textarea>
</div>
<div class="col-md-12"><br>
<input type="submit" class="long_inner_remove_button btn btn-danger" value="Remove">
</div>
</div>
`;
$(long_inner_wrapper).append(htmloutputlng_inner);
}
});
$(long_inner_wrapper).on("click", ".long_inner_remove_button", function(e) {
e.preventDefault();
$(this).closest('div.long_box_inner_ajax').remove();
lng_inner--;
});
});
</script>
</body>
</html>
