Ajax Options Page - Unique DB Option - CSS - Dynamic Fields

ajax_wp_plugin_options_page_unique_option_dynamic_fields_css.php

<?php

add_action('wp_ajax_save_i9_analytics_options', 'save_i9_analytics_options');
function save_i9_analytics_options()
{
    var_dump($_POST);

    if (!empty($_POST)) {
        $i9_analytics_data = $_POST;
        update_option('i9_analytics_integration_data', json_encode($i9_analytics_data));
        var_dump($i9_analytics_data);
        wp_die();
    }
    echo "ERROR";
    wp_die();
}

add_action('admin_menu', 'i9_analytics_integration');

function i9_analytics_integration()
{
    add_menu_page('i9 Analytics Integration Settings', 'i9 Analytics Integration', 'administrator', __FILE__, 'i9_analytics_integration_options_page', plugins_url('/images/icon.png', __FILE__));
}

function i9_analytics_integration_options_page()
{
    $jsonData = get_option('i9_analytics_integration_data');
    $options_data = json_decode($jsonData, true);
    ?>
    <div class="wrap i9_analytics">
        <h1>i9 Analytics Integration</h1>

        <form id="i9_analytics" method="post" action="options.php">
            <h3>Analytics IDs</h3>
            <div class="analytics-id" id="heap_id">
                <h4>Heap ID</h4>
                <input type="number" name="i9_heap_id" value="<?php echo esc_attr($options_data['i9_heap_id']); ?>" />
            </div>
            <div class="analytics-id" id="amplitude_id">
                <h4>Amplitude ID</h4>
                <input type="number" name="i9_amplitude_id" value="<?php echo esc_attr($options_data['i9_amplitude_id']); ?>" />
            </div>
            <div class="analytics-id" id="mixpanel_id">
                <h4>Mixpanel ID</h4>
                <input type="number" name="i9_mixpanel_id" value="<?php echo esc_attr($options_data['i9_mixpanel_id']); ?>" />
            </div>
            <div>
                <div id="events_header">
                    <h3>Click Events</h3><a id="add_new_event" href="#">Add new</a>
                </div>
                <div id="events">
                    <?php 
                        if ($options_data['i9_event_selector']) foreach ($options_data['i9_event_selector'] as $eventKey => $eventValue) :  ?>
                        <div class="event">
                            <input type="text" name="i9_event_selector[<?php echo $eventKey; ?>]" value="<?php echo esc_attr($options_data['i9_event_selector'][$eventKey]); ?>" placeholder="Event Selector">
                            <input type="text" name="i9_event_name[<?php echo $eventKey; ?>]" value="<?php echo esc_attr($options_data['i9_event_name'][$eventKey]); ?>" placeholder="Event Name">
                            <input type="text" name="i9_event_properties[<?php echo $eventKey; ?>]" value="<?php echo esc_attr($options_data['i9_event_properties'][$eventKey]); ?>" placeholder="Event Properties">
                            <div class="delete">Delete</div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php submit_button(); ?>
            <span id="message"></span>

            <script>
                jQuery('#add_new_event').on('click', (e) => {
                    e.preventDefault();
                    console.log("Adding new event");
                    let eventsDiv = jQuery("#events div.event");
                    let eventsLenght = eventsDiv.length;
                    var newEvent = jQuery(`<div class="event">
                        <input type="text" name="i9_event_selector[` + eventsLenght + `]" placeholder="Event Selector">
                        <input type="text" name="i9_event_name[` + eventsLenght + `]" placeholder="Event Name">
                        <input type="text" name="i9_event_properties[` + eventsLenght + `]" placeholder="Event Properties">
                        <div class="delete">Delete</div>
                    </div>`);
                    jQuery('#events').append(newEvent);
                });
                jQuery("#events").on('click', '.delete', function() {
                    this.closest(".event").remove();
                    return false;
                })
                jQuery('#i9_analytics').on('submit', (e) => {
                    jQuery('#submit').val('Saving').show();
                    e.preventDefault();
                    let formdata = jQuery("#i9_analytics").serializeArray();
                    let data = {};
                    jQuery(formdata).each((index, obj) => {
                        data[obj.name] = obj.value;
                    });

                    let postData = {
                        action: 'save_i9_analytics_options',
                    };
                    Object.assign(data, postData);
                    jQuery.post(ajaxurl, data).done(() => {
                        jQuery('#submit').val('General Settings Saved').fadeOut(0).fadeIn(200);
                    }).fail((err) => {
                        jQuery('#submit').val('Error: ' + JSON.stringify(err)).fadeOut(0).fadeIn(200);
                    });
                })
            </script>
        </form>
    </div>

    <style>
        .event {
            grid-template-columns: 2fr 2fr 2fr 1fr;
            display: grid;
            margin-bottom: 4px;
        }

        #events_header {
            grid-template-columns: 1fr 1fr;
            display: grid;
            align-items: center;
        }

        #events_header a {
            justify-self: end;
        }

        .analytics-id {
            grid-template-columns: 1fr 2fr;
            display: grid;
            align-items: center;
        }

        h4 {
            margin: 0.6em 0;
        }

        .delete {
            background-color: #f44336;
            color: white;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            line-height: 34px;
        }

        #add_new_event {
            background: #4CAF50;
            color: white;
            padding: 10px;
            text-decoration: none;
            border-radius: 4px;
        }

        .i9_analytics input[type='text'],
        .i9_analytics input[type='number'] {
            padding: 0 10px;
            margin: 0px 4px;
            display: inline-block;
            border: 1px solid rgb(204, 204, 204);
            border-radius: 4px;
            box-sizing: border-box;
            min-height: 10px;
        }

        input#submit {
            border-radius: 0;
            padding: 20px;
            line-height: 0px;
            border: none;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 99999999;
            width: calc(100% - 160px);
            margin-left: 160px;
            text-align: center;
        }
    </style>
<?php } ?>