function handleClick(e) { console.log(e); console.log(e.currentTarget); // Empty variables let fieldID = ''; let fieldAndType = ''; // Find the index with the li element e.path.find(function (el) { if (el.nodeName === 'LI') { fieldID = el.getAttribute('data-id'); fieldAndType = el.getAttribute('data-content'); el.setAttribute("disabled", "disabled"); } }); // split data content to get the field and type var field = fieldAndType.split('-')[0].trim(); var type = fieldAndType.split('-')[1].trim(); // Based on field type create the input and append it to the form var optionalField = ''; if (type == {{\App\Enums\ProfileOptionalFieldsTypeEnum::Text()->value }}) { var optionalField = '<div class="col-span-6 sm:col-span-3 lg:col-span-4"> <label for="'+field+'" class="block text-sm font-medium text-gray-700">' + field + '</label>' + '<input type="text" name="' + field + '" id="' + field + '" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></div>'; } else if (type == {{\App\Enums\ProfileOptionalFieldsTypeEnum::TextArea()->value }}) { var optionalField = '<div class="col-span-6 sm:col-span-3 lg:col-span-4"> <label for="'+field+'" class="block text-sm font-medium text-gray-700">' + field + '</label>' + '<textarea type="text" name="' + field + '" id="' + field + '" rows="10" cols="85" class="tinymce" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea></div>'; } // append to div optionalFields document.getElementById('optionalFields').innerHTML += optionalField; }