footnotes/templates/dashboard/settings-styling.html

<table id="settings-styling" class="widefat fixed">
    <tbody>
        <tr>
            <td>[[label-short-code-start]]</td>
            <td>
                <span>[[short-code-start]]</span>
                <span>[[short-code-start-user]]</span>
            </td>
        </tr>
        <tr>
            <td>[[label-short-code-end]]</td>
            <td>
                <span>[[short-code-end]]</span>
                <span>[[short-code-end-user]]</span>
            </td>
        </tr>
        <tr>
            <td>[[label-counter-style]]</td>
            <td>[[counter-style]]</td>
        </tr>
        <tr>
            <td>[[label-identical]]</td>
            <td>[[identical]]</td>
        </tr>
        <tr>
            <td>[[label-scroll-offset]]</td>
            <td>[[scroll-offset]] <span class="footnotes_notice">[[notice-scroll-offset]]</span></td>
        </tr>
        <tr>
            <td>[[label-scroll-duration]]</td>
            <td>[[scroll-duration]] <span class="footnotes_notice">[[notice-scroll-duration]]</span></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    var l_obj_ShortCodeStart = jQuery("#[[short-code-start-id]]");
    var l_obj_ShortCodeEnd = jQuery("#[[short-code-end-id]]");
    var l_obj_ShortCodeStartUserDefined = jQuery("#[[short-code-start-user-id]]");
    var l_obj_ShortCodeEndUserDefined = jQuery("#[[short-code-end-user-id]]");

    function footnotes_Display_UserDefined_Placeholders() {
        if (l_obj_ShortCodeStart.val() == "userdefined") {
            l_obj_ShortCodeStartUserDefined.parent().show();
            l_obj_ShortCodeEndUserDefined.parent().show();
        } else {
            l_obj_ShortCodeStartUserDefined.parent().hide();
            l_obj_ShortCodeEndUserDefined.parent().hide();
        }
    }
    footnotes_Display_UserDefined_Placeholders();

    l_obj_ShortCodeStart.on('change', function() {
        var l_int_SelectedIndex = jQuery(this).prop("selectedIndex");
        jQuery('#[[short-code-end-id]] option:eq(' + l_int_SelectedIndex + ')').prop('selected', true);
        footnotes_Display_UserDefined_Placeholders();
    });
    l_obj_ShortCodeEnd.on('change', function() {
        var l_int_SelectedIndex = jQuery(this).prop("selectedIndex");
        jQuery('#[[short-code-start-id]] option:eq(' + l_int_SelectedIndex + ')').prop('selected', true);
        footnotes_Display_UserDefined_Placeholders();
    });
</script>