I am making n dynamic form within nested accordion. My question is, how can I make input field inside the generated accordion that contains dynamic form.
I will describe my accordion. Parent accordion is Level, then content area, pisa framework, children of pisa framework is topic, then the topic has another children sub-topic, then sub-topic has a children course skill and course title.
It is a nested accordion with dynamic form. I can make multiple sub-topics from 1 topic. I can make multiple topics from 1 pisa framework. and in sub-topics i can create multiple course skill and title.
I can generate multiple Course Skill and the same with Course Title.
I can generate multiple Sub Topics, and Multiple Topics.
Topic up to Course Skill and Title
On the first run, with no additional sub-topics. I can run and add multiple course skill and course title. But when I add new sub topics, then on that generated sub-topics I have the same button that can add new course skill and course title, I cannot create course skill and title inside that generated sub-topics.
Can anyone help me.
This is my code for html and javascript. I used jquery
I expect to happen is, when I create new sub-topics and click the button that can add additional input field for course skill and course title. I am newbie, but I think this dynamic form will help me to move forward that's why I add some of it on my feature.
I am using Laravel and blade templating language.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>Mathayog | Skills Map</title>
</head>
<body>
This is the Content Creator Skills Map Creation <br><br>
<form action="#" method="POST" style="height: 100%;">
@csrf
<input type="hidden" name="curriculumLead_id" value="{{ $curriculumLead_id }}">
<input type="hidden" name="admin_id" value="{{ $admin_id }}">
<input type="hidden" name="contentCreator_id" value="{{ $admin_id }}">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item" style="border: 1px solid #ccc ">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Level
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
{{-- Level Accordion --}}
<br><input type="text" name="level" placeholder="Please input Level" class="form-control"><br>
<div class="accordion accordion-flush" id="accordionFlushExampleOne">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOneOne" aria-expanded="false" aria-controls="flush-collapseOneOne">
Content Area
</button>
</h2>
<div id="flush-collapseOneOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExampleOne">
<div class="accordion-body">
{{-- Content Area Accordion --}}
<br><input type="text" name="content_area" placeholder="Please input Content Area" class="form-control"><br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOneTwo" aria-expanded="false" aria-controls="flush-collapseOneTwo">
PISA Framework
</button>
</h2>
<div id="flush-collapseOneTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExampleOne">
<div class="accordion-body">
{{-- PISA Framework Accordion --}}
<br><input type="text" name="pisa_framework" placeholder="Please input PISA Framework" class="form-control"><br>
<div class="accordion accordion-flush" id="accordionFlushExampleTwo">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOneOneTwo" aria-expanded="false" aria-controls="flush-collapseOneOneTwo">
Topic
</button>
</h2>
<div id="flush-collapseOneOneTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExampleTwo">
<div class="accordion-body">
{{-- Topic Accordion --}}
<br><input type="text" name="topic[]" placeholder="Please input Topic" class="form-control"><br>
<div class="accordion accordion-flush" id="parentAccordion0 show_sub_topic">
<div class="accordion-item" id="show_sub_topic">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#subTopicFlushCollapse0" aria-expanded="false" aria-controls="subTopicFlushCollapse0">
Sub Topic
</button>
</h2>
<div id="subTopicFlushCollapse0" class="accordion-collapse collapse" data-bs-parent="#parentAccordion0">
<div class="accordion-body">
{{-- Sub Topic Accordion --}}
<br><input type="text" name="sub_topic[]" placeholder="Please input Sub Topic" class="form-control"><br>
<div class="accordion accordion-flush" id="courseAccordion0">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#skillFlushCollapse0" aria-expanded="false" aria-controls="skillFlushCollapse0">
Course Skill
</button>
</h2>
<div id="skillFlushCollapse0" class="accordion-collapse collapse" data-bs-parent="#courseAccordion0">
<div class="col mt-4">
<button id="add_course_skill" class="btn btn-warning mb-3 add_more_course_skill">Additional Course Skill</button>
</div>
<div class="accordion-body row g-2" id="show_input_skill">
{{-- Course Skill Accordion --}}
<div class="col">
<input name="course_skill[]" type="text" class="form-control" placeholder="Course Skill">
</div>
<div class="col">
<button id="remove_course_skill" class="btn btn-danger mb-3 remove_course_skill">Remove Course Skill</button>
</div>
</div>
</div>
{{-- <input type="text" name="course_skill[]" placeholder="Please input Course Skill" class="form-control"> --}}
{{-- <button id="add_course_skill" class="btn btn-danger add_more_course_skill" style="margin-top: 15px; margin-bottom: 15px">Add Course Skill</button> --}}
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#titleFlushCollapse0" aria-expanded="false" aria-controls="titleFlushCollapse0">
Course Title
</button>
</h2>
<div id="titleFlushCollapse0" class="accordion-collapse collapse" data-bs-parent="#courseAccordion0">
<div class="col mt-4">
<button id="add_course_skill" class="btn btn-warning mb-3 add_more_course_title">Additional Course Title</button>
</div>
<div class="accordion-body row g-2" id="show_input_title">
{{-- Course Title Accordion --}}
<div class="col">
<input name="course_title[]" type="text" class="form-control" placeholder="Course Title">
</div>
<div class="col">
<button id="remove_course_title" class="btn btn-danger mb-3 remove_course_title">Remove Course Title</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="add_sub_topic" class="btn btn-success add_more_sub_topic" style="margin-top: 15px">Add Sub-Topic</button>
</div>
</div>
</div>
<button id="add_topic" class="btn btn-info add_more_topic" style="margin-top: 15px">Add Topic</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<button type="submit" name="submitBtn" id="submitBtn" class="btn btn-dark" style="margin-top: 15px">Submit</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$(".add_more_course_skill").click(function(e) {
e.preventDefault();
$("#show_input_skill").prepend(`
<div class="accordion-body row g-2" id="show_input_skill">
{{-- Added Course Skill Accordion --}}
<div class="col">
<input name="course_skill[]" type="text" class="form-control" placeholder="Course Skill">
</div>
<div class="col">
<button id="remove_course_skill" type="submit" class="btn btn-danger remove_course_skill">Remove Course Skill</button>
</div>
</div>
`);
});
$(".add_more_course_title").click(function(e) {
e.preventDefault();
$("#show_input_title").prepend(`
<div class="accordion-body row g-2" id="show_input_title">
{{-- Course Title Accordion --}}
<div class="col">
<input name="course_title[]" type="text" class="form-control" placeholder="Course Title">
</div>
<div class="col">
<button id="remove_course_title" type="submit" class="btn btn-danger mb-3 remove_course_title">Remove Course Title</button>
</div>
</div>
`);
});
let subTopicCounter = 0;
$(".add_more_sub_topic").click(function(e) {
e.preventDefault()
subTopicCounter++;
const parentAccordionID = `parentAccordion${subTopicCounter}`;
const subTopicFlushCollapseID = `subTopicFlushCollapse${subTopicCounter}`;
const courseAccordionID = `courseAccordion${subTopicCounter}`;
const skillFlushCollapseID = `skillFlushCollapse${subTopicCounter}`;
const titleFlushCollapseID = `titleFlushCollapse${subTopicCounter}`;
$("#show_sub_topic").prepend(`
<div class="accordion accordion-flush" id="${parentAccordionID} show_sub_topic">
<div class="accordion-item" id="show_sub_topic">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#${subTopicFlushCollapseID}" aria-expanded="false" aria-controls="${subTopicFlushCollapseID}">
Sub Topic
</button>
</h2>
<div id="${subTopicFlushCollapseID}" class="accordion-collapse collapse" data-bs-parent="#parentAccordion0">
<div class="accordion-body">
{{-- Sub Topic Accordion --}}
<br><input type="text" name="sub_topic[]" placeholder="Please input Sub Topic" class="form-control"><br>
<div class="accordion accordion-flush" id="${courseAccordionID}">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#${skillFlushCollapseID}" aria-expanded="false" aria-controls="${skillFlushCollapseID}">
Course Skill
</button>
</h2>
<div id="${skillFlushCollapseID}" class="accordion-collapse collapse" data-bs-parent="#${courseAccordionID}">
<div class="col mt-4">
<button id="add_course_skill" type="submit" class="btn btn-warning mb-3 add_more_course_skill">Additional Course Skill</button>
</div>
<div class="accordion-body row g-2" id="show_input_skill">
{{-- Course Skill Accordion --}}
<div class="col">
<input name="course_skill[]" type="text" class="form-control" placeholder="Course Skill">
</div>
<div class="col">
<button id="remove_course_skill" type="submit" class="btn btn-danger mb-3 remove_course_skill">Remove Course Skill</button>
</div>
</div>
</div>
{{-- <input type="text" name="course_skill[]" placeholder="Please input Course Skill" class="form-control"> --}}
{{-- <button id="add_course_skill" class="btn btn-danger add_more_course_skill" style="margin-top: 15px; margin-bottom: 15px">Add Course Skill</button> --}}
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#${titleFlushCollapseID}" aria-expanded="false" aria-controls="${titleFlushCollapseID}">
Course Title
</button>
</h2>
<div id="${titleFlushCollapseID}" class="accordion-collapse collapse" data-bs-parent="#${courseAccordionID}">
<div class="col mt-4">
<button id="add_course_skill" type="submit" class="btn btn-warning mb-3 add_more_course_title">Additional Course Title</button>
</div>
<div class="accordion-body row g-2" id="show_input_title">
{{-- Course Title Accordion --}}
<div class="col">
<input name="course_title[]" type="text" class="form-control" placeholder="Course Title">
</div>
<div class="col">
<button id="remove_course_title" type="submit" class="btn btn-danger mb-3 remove_course_title">Remove Course Title</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`)
})
});
</script>
</body>
</html>