showing inputs after button press

Hello,
I'm trying to hide some inputs in my editor by default and then have them visible after a button is pressed.
I got the button into my editor thanks to this thread
but now the button does not call any functions or at least i don't know how to

This is my editor:

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.wochenplan.php',
        table: '#wochenplan',
        fields: [
            {
                "label": "Departure:",
                "name": "wochenplan.dep_1"
            },
            {
                "label": "ETD 1:",
                "name": "wochenplan.etd_1"
            },
            {
                "label": "ATD 1:",
                "name": "wochenplan.atd_1"
            },
            {
                "label": "ETA 1:",
                "name": "wochenplan.eta_1"
            },
            {
                "label": "ATA 1:",
                "name": "wochenplan.ata_1"
            },
            {
                "label": "Destination 1:",
                "name": "wochenplan.dest_1"
            },
            {
                "label": "ETD 2:",
                "name": "wochenplan.etd_2"
            },
            {
                "label": "ATD 2:",
                "name": "wochenplan.atd_2"
            },
            {
                "label": "ETA 2:",
                "name": "wochenplan.eta_2"
            },
            {
                "label": "ATA 2:",
                "name": "wochenplan.ata_2"
            },
            {
                "label": "Destination 2:",
                "name": "wochenplan.dest_2"
            },
            {
                "label": "ETD 3:",
                "name": "wochenplan.etd_3"
            },
            {
                "label": "ATD 3:",
                "name": "wochenplan.atd_3"
            },
            {
                "label": "ETA 3:",
                "name": "wochenplan.eta_3"
            },
            {
                "label": "ATA 3:",
                "name": "wochenplan.ata_3"
            },

And i want most of them hidden by default so i did this:

editor.on('initCreate', function() {
        editor.hide('wochenplan.atd_1');
        editor.hide('wochenplan.ata_1');
        editor.hide('wochenplan.etd_2');
        editor.hide('wochenplan.atd_2');
        editor.hide('wochenplan.eta_2');
        editor.hide('wochenplan.ata_2');
        editor.hide('wochenplan.dest_2');
        editor.hide('wochenplan.etd_3');
        editor.hide('wochenplan.atd_3');
        editor.hide('wochenplan.eta_3');
        editor.hide('wochenplan.ata_3');
        editor.hide('wochenplan.dest_3');
        editor.hide('wochenplan.ate');
    });

which works perfectly.

i then add a button:

$( '<button id="moreDest" type="button">More Destinations</button>' ).insertAfter(
        editor.field( 'wochenplan.dest_1' ).input()
    );

which shows up as expected but my function somehow does not work:

$("#moreDest").on("click", function () {
        editor.show( 'wochenplan.dest_2' );
        editor.show('wochenplan.eta_2');
        editor.show('wochenplan.dest_2');
        editor.show('wochenplan.etd_3');
        editor.show('wochenplan.eta_3');
        editor.show('wochenplan.dest_3');
    } );

even though this works: (I use this to show all cells while editing but not during create)

editor.on('initEdit', function() {
        editor.show(); //Shows all fields
    });