Form
Result input
HTML:
<div class="bg-primary flex p-3">
<h3 class="font-medium text-white">WORK EXPERIENCE</h3>
</div>
<div class="bg-white shadow-2xl p-5 flex flex-wrap mb-10">
<a id="btnExperience" class="cursor-pointer flex ml-auto bg-primary p-2 text-white rounded-md hover:bg-gray-600">Add Work Experience
<svg width="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<g id="Complete">
<g data-name="add" id="add-2">
<g>
<line fill="none" stroke="#fcfcfc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="19" y2="5"></line>
<line fill="none" stroke="#fcfcfc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="19" y1="12" y2="12"></line>
</g>
</g>
</g>
</g>
</svg>
</a>
<div id="experience" class="w-screen mt-4">
<div class="mb-4 flex flex-col gap-2">
<div class="tracking-wide font-semibold bg-green-500 px-2 py-1 text-white w-fit rounded-md">
Work Experience 1
</div>
<div class="lg:flex md:flex gap-5 mb-6">
<div class="w-full">
<label class="tracking-wide text-primary font-semibold mb-2" for="position[]">
Position
</label>
<input type="text" id="position[]" name="position[]" class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
<div class="w-full">
<label class="tracking-wide text-primary font-semibold mb-2" for="date_start[]">
Start date
</label>
<input type="date" id="date_start[]" name="date_start[]" class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
<div class="w-full">
<label class="tracking-wide text-primary font-semibold mb-2" for="date_end[]">
End date
</label>
<input type="date" id="date_end[]" name="date_end[]" class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
</div>
<div class="lg:flex md:flex gap-5 lg:mb-0">
<div data-job="1" id="jobResponsibiities" class="jobResponsibiities w-full flex flex-col">
<a id="btnJob" data-job-experience="1" class="btnJob cursor-pointer bg-primary px-2 py-1 text-white rounded-md hover:bg-gray-600 w-fit mb-4 text-sm">Add Job Responsibilities</a>
<div class=" w-full">
<label class="tracking-wide text-primary font-semibold" for="job_responsibilities[]">
Job Responsibilities 1.1
</label>
<input type="text" id="job_responsibilities[]" name="job_responsibilities[]" class=" rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
</div>
<div data-project="1" id="projectAccomplishment" class="projectAccomplishment w-full flex flex-col">
<a id="btnProject" data-project-experience="1" class="btnProject cursor-pointer bg-primary px-2 py-1 text-sm text-white rounded-md hover:bg-gray-600 w-fit mb-4">Add Project Accomplishment</a>
<div class=" w-full">
<label class="tracking-wide text-primary font-semibold" for="project_accomplishment[]">
Project Accomplishment 1.1
</label>
<input type="text" id="project_accomplishment[]" name="project_accomplishment[]" class=" rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript(Using JQuery):
<script>
$(document).ready(function() {
let number = 2
$("#btnExperience").click(function() {
const jobNumber = 1
const projectNumber = 1
const experienceHtml = `
<div class="mb-4 flex flex-col gap-2">
<div class="tracking-wide font-semibold bg-green-500 px-2 py-1 text-white w-fit rounded-md">
Work Experience ${number}
</div>
<div class="lg:flex md:flex gap-5 mb-6">
<div class="w-full">
<label class="tracking-wide text-primary font-semibold mb-2" for="position[]">Position</label>
<input type="text" id="position[]" name="position[]" class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
<div class="w-full">
<label class="tracking-wide text-primary font-semibold mb-2" for="date_start[]">Start date</label>
<input type="date" id="date_start[]" name="date_start[]" class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
<div class="w-full">
<label class="tracking-wide text-primary font-semibold mb-2" for="date_end[]">End date</label>
<input type="date" id="date_end[]" name="date_end[]" class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
</div>
<div class="lg:flex md:flex gap-5 lg:mb-0">
<div data-job="${number}" id="jobResponsibiities" class="jobResponsibiities w-full flex flex-col">
<a id="btnJob" data-job-experience="${number}" class="btnJob cursor-pointer bg-primary px-2 py-1 text-white rounded-md hover:bg-gray-600 w-fit mb-4 text-sm">Add Job Responsibilities</a>
<div class="w-full">
<label class="tracking-wide text-primary font-semibold" for="job_responsibilities[]">Job Responsibilities ${number}.${jobNumber}</label>
<input type="text" id="job_responsibilities[]" name="job_responsibilities[]" class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
</div>
<div data-project="${number}" id="projectAccomplishment" class="projectAccomplishment w-full flex flex-col">
<a id="btnProject" data-project-experience="${number}" class="btnProject cursor-pointer bg-primary px-2 py-1 text-sm text-white rounded-md hover:bg-gray-600 w-fit mb-4">Add Project Accomplishment</a>
<div class="w-full">
<label class="tracking-wide text-primary font-semibold" for="project_accomplishment[]">Project Accomplishment ${number}.${projectNumber}</label>
<input type="text" id="project_accomplishment[]" name="project_accomplishment[]" class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black">
</div>
</div>
</div>
<hr class="mt-2">
</div>
`;
$("#experience").append(experienceHtml);
number++
})
$("#experience").on("click", ".btnJob", function() {
const experienceJob = $(this).data("job-experience")
const job = $(this).closest("#jobResponsibiities").data("job")
console.log(job)
$jobResponsibilities = $(`[data-job="${job}"]`)
let jobNumber = 2
$jobResponsibilities.find(".job-item label").each(function() {
const labelText = $(this).text()
const parts = labelText.split(".")
const currentJobNumber = parseInt(parts[1])
if (!isNaN(currentJobNumber) && currentJobNumber >= jobNumber) {
jobNumber = currentJobNumber + 1
}
})
let jobHtml = `
<div class="job-item w-full mb-3">
<label class="tracking-wide text-primary font-semibold" for="job_responsibilities[]">
Job Responsibilities ${experienceJob}.${jobNumber}
</label>
<div class="flex items-center gap-2">
<input
type="text"
id="job_responsibilities[]"
name="job_responsibilities[]"
class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black"
>
<span
id="deleteJob"
class="bg-white fill-red-500 flex h-fit rounded-full hover:bg-gray-100 hover:fill-red-600 cursor-pointer"
>
<svg class="w-8" viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title>minus_circle [#1426]</title>
<desc>Created with Sketch.</desc>
<defs> </defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-219.000000, -600.000000)">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path
d="M177.7,450 C177.7,450.552 177.2296,451 176.65,451 L170.35,451 C169.7704,451 169.3,450.552 169.3,450 C169.3,449.448 169.7704,449 170.35,449 L176.65,449 C177.2296,449 177.7,449.448 177.7,450 M173.5,458 C168.86845,458 165.1,454.411 165.1,450 C165.1,445.589 168.86845,442 173.5,442 C178.13155,442 181.9,445.589 181.9,450 C181.9,454.411 178.13155,458 173.5,458 M173.5,440 C167.70085,440 163,444.477 163,450 C163,455.523 167.70085,460 173.5,460 C179.29915,460 184,455.523 184,450 C184,444.477 179.29915,440 173.5,440"
id="minus_circle-[#1426]"
>
</path>
</g>
</g>
</g>
</g>
</svg>
</span>
</div>
</div>
`;
$jobResponsibilities.append(jobHtml)
})
$("#experience").on("click", ".btnProject", function() {
const experienceProject = $(this).data("project-experience")
const project = $(this).closest("#projectAccomplishment").data("project")
console.log(project)
$projectAccomplishment = $(`[data-project="${project}"]`)
let projectNumber = 2
$projectAccomplishment.find(".project-item label").each(function() {
const labelText = $(this).text()
const parts = labelText.split(".")
const currentprojectNumber = parseInt(parts[1])
if (!isNaN(currentprojectNumber) && currentprojectNumber >= projectNumber) {
projectNumber = currentprojectNumber + 1
}
})
let projectHtml = `
<div class="project-item w-full mb-3">
<label class="tracking-wide text-primary font-semibold" for="project_accomplishment[]">
Project Accomplishment ${experienceProject}.${projectNumber}
</label>
<div class="flex items-center gap-2">
<input
type="text"
id="project_accomplishment[]"
name="project_accomplishment[]"
class="rounded-[20px] appearance-none block w-full bg-gray-50 shadow-[0px_4px_15px_4px_rgba(0,0,0,0.25)] text-gray-700 border border-primary py-3 px-4 leading-tight focus:outline-none focus:bg-gray-50 focus:border-black"
>
<span
id="deleteProject"
class="bg-white fill-red-500 flex h-fit rounded-full hover:bg-gray-100 hover:fill-red-600 cursor-pointer"
>
<svg class="w-8" viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title>minus_circle [#1426]</title>
<desc>Created with Sketch.</desc>
<defs> </defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-219.000000, -600.000000)">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path
d="M177.7,450 C177.7,450.552 177.2296,451 176.65,451 L170.35,451 C169.7704,451 169.3,450.552 169.3,450 C169.3,449.448 169.7704,449 170.35,449 L176.65,449 C177.2296,449 177.7,449.448 177.7,450 M173.5,458 C168.86845,458 165.1,454.411 165.1,450 C165.1,445.589 168.86845,442 173.5,442 C178.13155,442 181.9,445.589 181.9,450 C181.9,454.411 178.13155,458 173.5,458 M173.5,440 C167.70085,440 163,444.477 163,450 C163,455.523 167.70085,460 173.5,460 C179.29915,460 184,455.523 184,450 C184,444.477 179.29915,440 173.5,440"
id="minus_circle-[#1426]"
>
</path>
</g>
</g>
</g>
</g>
</svg>
</span>
</div>
</div>
`;
$projectAccomplishment.append(projectHtml)
})
$("#experience").on("click", "#deleteJob", function() {
$(this).closest(".job-item").remove()
})
$("#experience").on("click", "#deleteProject", function() {
$(this).closest(".project-item").remove()
})
})
</script>
Controller(Using CI 3):
$noExperiences = count($this->input->post('position'));
for ($noExperience = 0; $noExperience < $noExperiences; $noExperience++) {
$dataExperience[] = [
'cv_id' => $cvId,
'experience_number' => $noExperience + 1,
'position' => $this->input->post('position')[$noExperience],
'date_start' => $this->input->post('date_start')[$noExperience],
'date_end' => $this->input->post('date_end')[$noExperience],
];
// Insert the data work experience into the database
if (!empty($dataExperience)) {
$this->db->insert_batch('cv_work_experience', $dataExperience);
}
$work_experience_id = $this->db->insert_id();
for ($noJob = 0; $noJob < count($this->input->post('job_responsibilities')); $noJob++) {
$dataJob[] = [
'cv_id' => $cvId,
'work_experience_id' => $work_experience_id,
'experience_number' => $noExperience + 1,
'job_responsibilities_number' => $noJob + 1,
'job_responsibilities' => $this->input->post('position')[$noExperience] . $this->input->post('job_responsibilities')[$noJob],
];
}
for ($noProject = 0; $noProject < count($this->input->post('project_accomplishment')); $noProject++) {
$dataProject[] = [
'cv_id' => $cvId,
'work_experience_id' => $work_experience_id,
'experience_number' => $noExperience + 1,
'project_accomplishment_number' => $noProject + 1,
'project_accomplishment' => $this->input->post('position')[$noExperience] . $this->input->post('project_accomplishment')[$noProject],
];
}
}
echo "<pre>";
print_r($dataJob);
echo "</pre>";
die;
I want to create a dynamic form, but when I enter the jobResponsibilities and projectAccomplishment data it doesn’t match the work experience number, here is my code.
I expect the jobResponbilities and projectAccomplishment data to match the work experience number.