I am making a function that fetch input values at shows them but after loop control goes out of my function while it had to do other function call which it dont calls it calls but control never comes back to the function back
MY code is given below
function getExp(){
getEdu()
alert('getExp')
for( let j=0;j<=jobExp;j++){
let companyName=document.getElementById("company-name-"+j).value
let position=document.getElementById("position-"+j).value
let startDate=document.getElementById('start-date-'+j).value
let endDate=document.getElementById('end-date-'+j).value
let div=document.createElement('div')
div.innerHTML=`<div>
<div class="bg-secondary text-white">
<strong><p class="h2"> ⦿${position} at ${companyName} ltd</strong>
</div>
<div>
<p class=" h5 font-weight-bold">from- ${startDate} to- ${endDate}</p>
</div>
</div>`
document.getElementById('job-exp').appendChild(div)
}}
function getEdu(){
alert('getEdu')
for( let i=0;i<=edu;i++){
let institution=document.getElementById("institution-"+i).value
let degree=document.getElementById("degree-"+i).value
let startDate=document.getElementById('start-'+i).value
let endDate=document.getElementById('end-'+i).value
let div=document.createElement('div')
div.innerHTML=`<div class="bg-dark text-white">
<p class="h3">Studied ${degree} at institution named ${institution} hehehhe</p>
</div>
<div>
<p class=" h5 font-weight-bold">started at ${startDate} got the degree on ${endDate}</p>
</div>`
document.getElementById('edu-exp').appendChild(div)
alert(edu)
}}
MY html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>resume builder</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<section id="section-1">
<form >
<div iud="basic" class="container bg-secondary text-white ">
<div class="container-md center-block rounded">
<div class="row ">
<div id="div-1" class="col ">
<div class="text-center">
<label class="fs-2 fw-normal" for="job-name">Type job name</label><br>
<input id="job-name" type="text" class="form-control-lg border-warning text-center rounded-circle " id="job-name " rows="3" placeholder="Job-name">
</div>
<div>
<label class="fs-3" for="first-name">Type first name</label><br>
<input id="first-name" type="text" class="border-dark form-control-lg-mb2 mt-2 ml-2 text-center rounded" id="first-name" rows="3" placeholder="first Name" required><br>
</div>
<div class="align-self-right">
<label class="fs-5" for="last-name">Type last name</label><br>
<input id="last-name" type="text" class="border-dark form-control-lg-mb2 ml-2 text-center rounded" id="last-name" rows="3" placeholder="last Name" required><br>
</div>
<div class="align-self-right">
<label class="fs-5" for="last-name">Type Phone number</label><br>
<input id="phone-number" type="text" class="border-dark form-control-lg-mb2 ml-2 rounded" id="last-name" rows="3" placeholder="+13672824"><br>
</div>
<div class="align-self-right">
<label class="fs-5"for="last-name">Type Email</label><br>
<input id="email" type="email" class="border-dark form-control-lg-mb2 ml-2 rounded" rows="3" placeholder="[email protected]" required>
</div>
<div class="align-self-right">
<label class="fs-5" for="country-name">Type address</label><br>
<input id="address" type="text" class="border-dark form-control-lg-mb2 ml-2 text-center rounded" rows="3" placeholder="whitye chapel road 40854 United States" required><br>
</div>
<div class="align-self-right">
<label class="fs-5" for="last-name">web address</label><br>
<input id="website" type="text" class="border-dark form-control-lg-mb2 ml-1 rounded" rows="3" placeholder="www.myweb.com"><br>
</div>
<div id="append-div">
<div class="align-self-right mt-3">
<label><input type="text" class="form-control-lg-2 border-dark col-5 h6 text-center rounded" id="country-name" rows="3" placeholder="label" required></label><br>
<input type="text" class="border-dark form-control-xl-mb2 ml-1 text-center rounded" id="country-name" rows="3" placeholder="value" required><br>
</div>
</div>
<div>
<button id="add-more-label" type="button" class="btn btn-secondary border-dark btn-outline-dark text-white ml-5 mt-3">Add more sections</button>
</div>
</div>
<div class="col ">
<div class="align-self-right mt-5">
<label class="fs-6 mt-5" for="last-name">Upload photo</label><br>
<input id="photo" type="file" class="border-dark form-control-lg-mb rounded" id="file" ><br>
</div>
<div class="mt-5">
<label class="fs-5" for="last-name">
your Description
</label>
<br>
<textarea id="description" class="border-dark form-control rounded pb-5 " id="text-area" rows="3" placeholder="about me"></textarea><br>
</div>
<div class="align-self-right">
<label class="fs-6 fst-italic" for="last-name"> Date of birth</label><br>
<input id="dob" type="date" class="border-dark form-control-lg-mb rounded" id="last-name" rows="3" placeholder="10/10/2000"><br>
</div>
</div>
</div>
</div>
<div class="text-right rounded mr-5">
<button onclick=getVals() type="button" class="mr-5 mt-5 text-center btn-next" value="0">
<i class="fa-solid fa-forward fa-beat-fade fa-2xs text-center pl-2"></i>
</button>
</div>
</div>
</form>
</section>
<section id="section-2" class="d-none" >
<form>
<div iud="basic" class="conatiner-fluid">
<div class="row mt-4">
<div class="col rounded">
<h3>
  Job experience
</h3>
<div class="">
<div id="exp-div" class="container bg-white rounded ">
</div>
</div>
<div>
<button id="add-more-exp" type="button" class="rounded btn-warning ml-5 ">Add more experience </button>
</div>
</div>
<div class="col">
<div>
<h3>
Education
</h3>
<div id="add-child-div" class="container bg-white rounded ">
</div>
<div><button id="add-more-edu"type="button" class=" rounded btn-warning ml-5 mt-3">Add more education</button>
</div>
</div>
</div>
</div>
</div>
<div class="text-right rounded mr-5">
<button onclick="getExp();" type="button" class="text-center pl-2 mr-5 mt-5 btn-next" value="1">
<i class="fa-solid fa-forward fa-beat-fade fa-2xs text-center pl-2"></i>
</button>
</div>
</form>
</section>
<section id="section-3" class="d-none">
<div class="container-fluid ">
<form>
<div class="row">
<div class=" col-lg border rounded" >
<div class="">
<div class=" border bg-secondary border-dark rounded-pill text-center">
<h4>Hard skill</h4>
</div>
</div>
<div id="sum-hard-skill">
</div>
<div class="text-center">
<button id="hard-skill-btn" class="btn-lg rounded bg-white btn-outline-primary text-secondary" type="button">Add more skills</button>
</div>
</div>
<div class="col-lg border rounded" >
<div class=" border bg-secondary border-dark rounded-pill text-center ">
<h4> Enter languages you know</h4>
</div>
<div>
</div>
<div id="sum-lang">
</div>
<div class="text-center">
<button id="btn-lang" class="btn-lg rounded bg-white btn-outline-primary text-secondary" type="button">Add more languages</button>
</div>
</div>
<div class="col-lg border rounded" >
<div class=" border bg-secondary border-dark rounded-pill text-center ">
<h4>Soft skills</h4>
</div>
<div id="sum-soft-skill"></div>
<div class="text-center">
<button id="btn-soft-skill" class="btn-lg rounded bg-white btn-outline-primary text-secondary" type="button">Add more soft-skill</button>
</div>
</div>
</div>
<div class="text-right rounded mr-5">
<button onclick="getHardSkills(); getSoftSkills(); getLang();"type="button" class="text-center pl-2 mr-5 mt-5 btn-next" value="2">
<i class="fa-solid fa-forward fa-beat-fade fa-2xs text-center pl-2"></i>
</button>
</div>
</form>
</div>
</section>
<section id="section-4" class="d-none">
<form >
<div class="container">
<div class="row">
<div class="col-lg">
<div class=" text-dark rounded border border-dark">
<div class=" col-sm rounded-pill bg-secondary text-white ">
<h4>Certification</h4>
</div>
<div>
<label for="'cert-name">Type cert Name</label>
<input type="text" id="cert-name" placeholder="Ejptv3.56">
</div>
<div class="ml-3">
<label for="instution-name">Instution</label>
<input type="text" id="instution-name" placeholder="Microsoft">
</div>
<div class="ml-1">
<label for="instution-name">Enter cridentials</label>
<input type="url" id="instution-name" placeholder="www.myweb.com/learners/1/you">
</div>
</div>
<div id="sum-cert"></div>
<div class="rounded text-center color-warning">
<button type="button" id="button-submit-cert">Add more certifications</button>
</div>
</div>
<div class="col-lg">
<div class="border border-dark">
<div class="rounded-pill bg-secondary">
<h4> Refrence</h4>
</div>
<div>
<label for="name-ref">Name</label>
<input id="name-ref" type="text" placeholder="Eric from Linkedin">
</div>
<div>
<label for="ref-url" class="rounded ml-2">Ref url</label>
<input id="ref-url" class="rounded " placeholder="www.Linkedin.com/Eric">
</div>
</div>
<div id="sum-ref"></div>
<div class="border-secondary mt-3">
<button id="btn-more-ref" type="button"class="mt-3 color--secondary">Add more Refrence</butoon>
</div>
</div>
</div>
</div>
<div class="text-right rounded mr-5">
<button type="button" class="text-center pl-2 mr-5 mt-5 btn-next" value="3">
<i class="fa-solid fa-forward fa-beat-fade fa-2xs text-center pl-2"></i>
</button>
</div>
</form>
</section>
<section id="section-5" class="d-nne">
<div class="" id="invoice">
<div class="bg-secondary row rounded ml-3 mr-3 ">
<div class="col text-dark">
<div id='header' class="d-flex">
<div class="font-weight-lighter h1 d-flex">
<p><strong id="first-name-put">first </strong></p><p id="last-name-put"> Last</p>
</div>
<div class="font-weight-light font-italic font col mt-2 ">
<br><span><h5 id="job-name-put">profession</h5></span>
</div>
</div>
<div class="font-italic"><strong>
<div >address:<span id="address-put">not changed</span></div>
<div >Phone:<span id="phone-number-put">not changed</span></div>
<div >Email:<span id="email-put">not changed</span></div>
<div >Web address:<span id="website-put">not changed</span></div>
<div>custom label and name:<span>not changed</span></div>
</strong>
</div>
</div>
<div class="col ">
<img src="/imgs/Screenshot (3).png " class="rounded-circle" alt="Image was too big should be 200 by 200">
<div> age:<span id="age-put">14</span>years </div>
<div> Date of birth:<span id="dob-put">12/13/2008</span></div>
</div>
</div>
<div class="">
<div class="row">
<div class="col ">
<h1><i class="fa-solid fa-briefcase"></i>Employement history</h1>
<div id="job-exp" class="">
</div>
<div>
<p class="h2"><i class="fa-solid fa-user-graduate"></i>Enter education</p>
<div id="edu-exp">
</div>
</div>
<div class="col border border-secondary rounded text-dark mt-4">
<p class="h3"><i class="fa-solid fa-certificate"></i>Certificate</p>
<div class="row ml-2 "><strong><p>Cert name----</p></strong><p>Company</p> </div>
</div>
</div>
<div class="col mr-5" >
<div class=" border border-secondary rounded">
<div >
<p class="h2 ml-3"><i class="fa-sharp fa-regular fa-user fa-2xs"></i>Profile</p>
</div>
<div class="">
<p id="description-put">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore optio enim totam Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dolores praesentium debitis non et ex rerum quo quaerat sint architecto. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut fugiat error vel quae assumenda impedit reiciendis neque? Vero, porro temporibus. omnis aut suscipit expedita at quam esse porro.</p>
</div>
</div>
<div class="col border border-secondary rounded text-dark mt-4">
<div>
<div>
<h2>Skills</h2>
<div>
<div> <p class="h4">Hard skills</p>
</div>
<div class="row">
<div id="hard-skill-put" >
</div>
</div>
</div>
</div>
<div>
<div> <p class="h4">soft skills</p>
</div>
<div id="soft-skill-put" class="row">
<div>bruh</div>
</div>
</div>
</div>
</div>
<div class="col border border-secondary rounded text-dark mt-4">
<p class="h3"><i class="fa-solid fa-language"></i>languages</p>
<div id="lang-put"></div>
<div class="h5"> ♣Hindi---5/5</div>
</div>
<div class="col border border-secondary rounded text-dark mt-4">
<p class="h3"><i class="fa-solid fa-language"></i>refrence</p>
<div class="row ml-2 "><p>ahmed---</p><p>linkedin</p> </div>
</div>
</div>
</div>
</div>
</div>
<div>
<button class="btn-download btn-block p-3">Download PDF </button>
</div>
</section>
<script src="js/jspdf.debug.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/html2pdf.min.js"></script>
<script src="./index.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
it should return the control back to getExp function but when once getEdu is called it nevers brings control back sugesting any kind of alternative will be good too