Javascript for adding multiple array in html oninput

Question

I have successfully pass parameter of skills in url from one page to another(job detail page to job listing page) by clicking view more link but now in second page i need to show all those skills right after it open to the second page. i have attached the image as u can see, once i type the skills, all skills appear there but in set of data and not showing only skill but i want skills with bullet point only to appear and once i click clear all it should remove So far, as i know it should use javascript and im not sure how to code it, can someone help me to solve this issue?

 function autoFilters() let availableSkills = []; @foreach($allSkill as $skill) availableSkills.push('{!! $skill !!}'); @endforeach $("#skills").autocomplete({ source: availableSkills }); let addField = $('#skills'); function onInput() { let val = document.getElementById("skills").value; for (let i = 0; i < availableSkills.length; i++) { if (availableSkills[i] === val) { let skill = $('#skills').val(); let fieldHTML = "<div class='border rounded mb-2 px-3 py-1 d-flex justify-content-between'><p class='m-0 skill-value'>"+skill+"</p><button type='button' class='btn rounded-0 float-right p-0 remove-skill'><i class='fas fa-times-circle crimson'></i></button></div>"; $(fieldHTML).insertAfter(addField); $('#skills').val(""); autoFilters(); break; } } } $('.skill-wrapper').on('click','.remove-skill',function(e) { e.preventDefault(); $(this).parent('div').remove(); autoFilters(); }); $('#clear-skills').on('click',function(e) { e.preventDefault(); $('.skill-value').each(function(){ $(this).parent('div').remove(); }); autoFilters(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="skill-wrapper"> <input type="text" oninput='onInput()' id="skills" class="form-control height-43 full-width mb-2" placeholder="Enter Skills"> <button type="submit" id="clear-skills" class="btn btn-primary btn-cerulean full-width mt-2">Clear all</button> </div>

Answer 1

function onChange() {
  let val = document.getElementById("skills").value;
  for (let i = 0; i < availableSkills.length; i++) {
    if (availableSkills[i] === val) {
      let skill = $('#skills').val();
      let fieldHTML = "<div class='border rounded mb-2 px-3 py-1 d-flex justify-content-between'><p class='m-0 skill-value'>" + skill + "</p><button type='button' class='btn rounded-0 float-right p-0 remove-skill'><i class='fas fa-times-circle crimson'></i></button></div>";
      $(fieldHTML).insertAfter(addField);
      $('#skills').val("");
      autoFilters();
      break;
    }
  }
}

Please Change onInput with onChange method.