Hey pals, I'm encountering an issue with Ajax. Everything seems to be running smoothly when the page initially loads. However, once I hit the add button to insert a new row for a second entry, things start to go haywire. The functionality is perfect upon page load, but issues arise after clicking the Add Button. Subsequently, duplicated text appears in the dropdown box
Below is my code:
$(document).ready(function(){
var experienceCount = 1;
experience_field(experienceCount);
function experience_field(number){
html = '<div class="row">';
//rest of code...
}
$(document).on('click', '#experienceAdd', function(){
experienceCount++;
experience_field(experienceCount);
});
$(document).on('click', '.experienceRemove', function(){
experienceCount--;
$(this).closest(".row").remove();
});
});
Please review the images provided - the first image indicates proper function upon page load with data populating in the dropdown list as expected. However, upon clicking the add button to introduce additional dynamic fields, the Ajax fails to work and adds data only to the initial dropdown list instead of subsequent dropdown lists. I am seeking a solution where the data can be added to all dropdown lists without duplication, unlike what is currently observed in the images.