Hidden custom form template not showing up

kaustubh.agrawal2000

Hello I have a custom editor form template from one of the examples as below

<div id="customForm" style="display:none">
    <fieldset class="name">
        <legend>Name</legend>
    </fieldset>
    <fieldset class="office">
        <legend>Office</legend>
    </fieldset>
    <fieldset class="hr">
        <legend>HR info</legend>
    </fieldset>
</div>

the only thing is by default its hidden
and I am trying to show/hide it as below.. but the template is not showing up.. when I manually do the $(#customForm).show() from developer tools it show up correctly..

    editor = new $.fn.dataTable.Editor( {
        ajax: base_url + 'api/voucher',
        table: "#voucher",
        template: "#customForm",
        idSrc:  'voucher_id',
        fields: [{
               label : "Voucher",
               name : "voucher_id",
               type: "hidden"
           },   
               {
                   label : "Voucher Type",
                   name : "voucher_type",
                   type: "select2",
               ipOpts : [
                  {'label' : 'Credit', 'value' : 'Credit'},
                  {'label' : 'Debit', 'value' : 'Debit'}
               ],
                   opts: {
                   "placeholder": "Select Voucher Type",
                   "allowClear": true
                }
               },
               {
                label: "Credit Party",
                name: "credit_party_id",
                type: "select2",
                ipOpts: getFirmList('credit_party_id'),
                opts: {
                   "placeholder": "Select Credit Party",
                   "allowClear": true
                }
            },
            {
                    label: "Debit Party",
                    name: "debit_party_id",
                        type: "select2",
                        ipOpts: getPartyList('debit_party_id'),
                 opts: {
                    "placeholder": "Select Debit Party",
                    "allowClear": true
                    }
            },
            {
                    label: "Voucher Amount",
                    name : "voucher_amount"
            },
            {
                    label: "Narration",
                    name: "narration"
            },
            {
                    label: "Status",
                    name: "status",
                    type: "todo",
                    def: 1
            }
        ]
    });
    
    editor.on('initEdit', function() {
        $("#customForm").show();
    });
 
    editor.on('postEdit', function() {
        $("#customForm").hide();
    });
    editor.on('initCreate', function() {
        $("#customForm").show();
    });
 
    editor.on('postCreate', function() {
        $("#customForm").hide();
    });

Any suggestions would be really appriciated.