Sail Number and Country Code - Custom Codes

<?php
// This is added to:
// /wp-admin/admin.php?page=edit-snippet&id=13

add_action('wp_footer', 'sails_number_and_country_code_func', 999999);
function sails_number_and_country_code_func(){
?>
<style>
    .enter_your_sails_number_and_country_code_here { display: block; }
</style>
<script>
jQuery(document).ready(function($) {
    // Ensure the DOM is fully loaded
    const targetRow = $('.enter_your_sails_number_and_country_code_here');
    const textarea = targetRow.find('textarea'); // Locate the textarea inside the target row

    if (targetRow.length) {
        targetRow.css('display', 'block');
    }

    // Use event delegation to handle dynamically added elements
    $(document).on('change', '#pa_sail-numbers', function() {
        console.log('Selected value:', $(this).val());
        if ($(this).val() == "yes-i-need-sail-numbers") {
            targetRow.css('display', 'table-row');
            // Add "required" attribute to the textarea
            textarea.attr('required', true);
        } else {
            targetRow.css('display', 'none');
            // Remove "required" attribute from the textarea
            textarea.removeAttr('required');
        }
    });

    // Handle dynamic changes after an AJAX call
    jQuery(document).ajaxComplete(function(event, xhr, settings) {
        targetRow.css('display', 'block');
        // Optionally add "required" attribute after AJAX completion if necessary
        textarea.attr('required', true);
    });
});
</script>


<?php
}