Hello the beautiful souls of this magnificent forum. I allow myself to expose here my problem in the hope that someone could help me find a solution to this code below. Indeed, when you click on the “Add” button, the adds a field. The problem is the script doesn’t work in the new dynamic add fields while it works in the base fields. Thank you for your help!
`<!doctype html>
Hours*
</div>
<div class="arrow">
<i class='bx bx-chevron-down'></i>
</div>
</div>
<div class="options">
<div class="options-search-tags">
<input type="text" id="departureHour" class="search-tags" placeholder="Rechercher une horaire">
<button type="button" class="clear"><i class='bx bx-x'></i></button>
</div>
<div class="option all-tags" data-value="Tout">Select all</div>
<div class="option" data-value="05:00">05:00</div>
<div class="option" data-value="05:15">05:15</div>
<div class="option" data-value="05:30">05:30</div>
<div class="option" data-value="05:45">05:45</div>
<div class="option" data-value="06:00">06:00</div>
<div class="option" data-value="06:15">06:15</div>
<div class="option" data-value="06:30">06:30</div>
<div class="option" data-value="06:45">06:45</div>
<div class="no-result-message" style="display: none;">Aucun résultat</div>
</div>
<span class="tag_error-msg error_msg"></span>
</div>
</div>
</div>
</div>
<div class="ajout-btn-wrap">
<div class="ajout-btn">
<p id="btnAjoutSpec" class="ajout-text-btn ajouter_btn"><span>+</span>Add</p>
</div>
</div>
<small id="cStation" class="form-text text-muted"></small>
</div>
$("#btnAjoutSpec").click(function(event){ //Fonction d'ajout de nouveuax champs
event.stopPropagation();
$('#show_row').append(`
Hours*
<i></i>
<i></i>
Tout sélectionner
05:00
05:15
05:30
05:45
06:00
06:15
06:30
06:45
Aucun résultat
<p>×</p>
`);
});
$(document).on('click', '.supp_btn', function(e){ //Suppression de nouveaux champs
e.stopPropagation();
let row_item = $(this).parent().parent();
$(row_item).remove();
});
const customSelects = $(“.custom-select”);
function updateSelectedOptions(customSelect) {
const selectedOptions = $(customSelect).find('.option.active').not($(customSelect).find('.option.all-tags')).map(function () {
return {
value: $(this).attr("data-value"),
text: $(this).text().trim()
};
}).get();
const selectedValues = selectedOptions.map(function (option) {
return option.value;
});
$(customSelect).find('.tags-input').val(selectedValues.join(', '));
let tagsHTML = "";
if (selectedOptions.length === 0) {
tagsHTML = 'Ajouter une horaire de départ';
} else {
const maxTagsToShow = 10;
let additionalTagsCount = 0;
$.each(selectedOptions, function (index, option) {
if (index < maxTagsToShow) {
tagsHTML += ''+option.text+'×';
} else {
additionalTagsCount++;
}
});
if (additionalTagsCount > 0) {
tagsHTML += '+'+additionalTagsCount+''
}
}
$(customSelects).find('.selected-options').html(tagsHTML);
}
customSelects.each(function () {
const customSelect = $(this);
const searchInput = customSelect.find('.search-tags');
const optionsContainer = customSelect.find('.options');
const noResultmsg = customSelect.find('.no-result-message');
const options = customSelect.find('.option');
const allTagsOption = customSelect.find('.option.all-tags');
const clearBtn = customSelect.find('.clear');
allTagsOption.on('click', function () {
const isActive = allTagsOption.hasClass('active');
options.each(function () {
if (!$(this).is(allTagsOption)) {
$(this).toggleClass('active', !isActive);
}
});
updateSelectedOptions(customSelect);
});
clearBtn.on('click', function () {
searchInput.val("");
options.css("display", "block");
noResultmsg.css("display", "block");
});
searchInput.on('input', function () {
const searchTerm = searchInput.val().toLowerCase();
options.each(function () {
const optionText = $(this).text().trim().toLowerCase();
const shoudShow = optionText.includes(searchTerm);
$(this).css("display", shoudShow ? "block" : "none");
});
const anyOptionsMatch = options.filter(":visible").length > 0;
noResultmsg.css("display", anyOptionsMatch ? "none" : "block");
if (searchTerm) {
optionsContainer.addClass('option-search-active');
} else {
optionsContainer.removeClass('option-search-active');
}
});
});
customSelects.each(function () {
const customSelect = $(this);
const options = customSelect.find('.option');
options.on("click", function () {
$(this).toggleClass('active');
updateSelectedOptions(customSelect);
});
});
$(document).on("click", function (event) {
const removeTag = $(event.target).closest('.remove-tag');
if (removeTag.length) {
const customSelect = removeTag.closest('.custom-select');
const valueToRemove = removeTag.attr("data-value");
const optionToRemove = customSelect.find(".option[data-value='"+valueToRemove+"']");
optionToRemove.removeClass('active');
const otherSelectedOptions = customSelect.find('.option.active:not(.all-tags)');
const allTagsOption = customSelect.find('.option.all-tags');
if (otherSelectedOptions.length === 0) {
allTagsOption.removeClass('active');
}
updateSelectedOptions(customSelect);
}
});
//const inputInRow = $('.input_in_row');
const selectBoxes = $('.select-box');
selectBoxes.on("click", function (e) {
if (!$(e.target).closest('.tag').length) {
$(this).parent().toggleClass('open');
}
});
$(document).on("click", function(e) {
if (!$(e.target).closest('.custom-select').length && !$(e.target).hasClass('remove-tag')) {
customSelects.removeClass('open');
}
});
function resetCustomSelects() {
customSelects.each(function () {
const customSelect = $(this);
customSelect.find('.option.active').each(function () {
$(this).removeClass('active');
});
customSelect.find('.option.all-tags').removeClass('active');
updateSelectedOptions(customSelect);
});
}
updateSelectedOptions(customSelects[0]);
const submitBtn = $('.btn_submit');
submitBtn.on("click", function () {
let valid = true;
customSelects.each(function () {
const customSelect = $(this);
const selectedOptions = customSelect.find('.option.active');
if (selectedOptions.length === 0) {
const tagErrorMsg = customSelect.find('.tag_error_msg');
tagErrorMsg.text("Ce champ est requis");
tagErrorMsg.css("display", "block");
valid = false;
} else {
const tagErrorMsg = customSelect.find('.tag_error_msg');
tagErrorMsg.text("");
tagErrorMsg.css("display", "none");
}
});
if (valid) {
let tags = $('.tags-input').val();
alert(tags);
resetCustomSelects();
return;
}
});
`