on click, get element and then find li in element and extract what you need

PHOTO EMBED

Wed Jan 18 2023 16:10:18 GMT+0000 (Coordinated Universal Time)

Saved by @Jude #javascript

        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;


        }
content_copyCOPY