Why I am getting 'querySelector' of null ? What I'm doing wrong in this code?

Question

I have implemented code on magnolia cms, the task is to get the form values in another hidden form (from Marketo). The code works fine in the Magnolia community edition but not in a production environment. Kindly help with the code. What's wrong here?

The HTML for the Magnolia Webform :

<form id="commandDEmarketo_test" class="webtrekkHelper_configs eineSeite" data-webtrekk-forminstall="true" data-mwf-target="/formulare/servlet/form;webforms=A0FE63A9C0A3C637292A391D2D5F6662?_uid=DEmarketo_test&amp;lang=de_DE&amp;_view=webform" data-webtrekk-temp-append-base-contentid="." data-mwf-id="DEmarketo_test" action="/formulare/servlet/form;webforms=A0FE63A9C0A3C637292A391D2D5F6662" method="post" enctype="multipart/form-data" accept-charset="utf-8" onsubmit="return false;" data-mktorelay-formid="1038">
    <input type="hidden" name="audience" value="UIP">
    <input type="hidden" name="revisionNr" value="24593">
    <input type="hidden" name="formRevisionNr" value="23509">
    <input type="hidden" name="wt_form" value="1">
    <input type="hidden" name="_mwfToken:DEmarketo_test" value="D4486376922829AE0BA1C3BA5F935941">
    <div id="form-top"></div>

    <ul id="crumbs">

        <li class="selected  ">

            <a href="#" style="height: 0px; padding-right: 0px;">
                <div>
                    <span> </span>
                </div>
            </a>

        </li>

        <li class="last-child">
            <a href="#" style="height: 0px; padding-right: 0px;">
                <div>
                    <span>

                                Success

                    </span>
                </div>
            </a>
        </li>
    </ul>

    <div class="innerForm">

        <ul class="">

            <div class="">

                <li data-mwf-container="mwf0301fe8ca93a" class="mwf-field 
        mwf-bold 
        mwf-italic 
         h-odd">

                    <script>
                        var d = document.getElementById("commandDEmarketo_test");
                        d.setAttribute("data-mktorelay-formid", "1038");
                    </script>

                </li>

            </div>

            <div class=" none">

                <li data-mwf-container="mwf23e481e7bdc0" class="mwf-field  h-even">
                    <label class="mwf-label" for="mwf23e481e7bdc0">

                        Vorname

                    </label>

                    <div class="mwf-input">

                        <input id="mwf23e481e7bdc0" name="vorname" class="mwf-text " data-mwf-id="mwf23e481e7bdc0" type="text" value="">

                        <p class="mwf-error"></p>
                    </div>
                </li>
            </div>

            <div class=" none">

                <li data-mwf-container="mwf08d9bc1fbf81" class="mwf-field  h-odd">
                    <label class="mwf-label" for="mwf08d9bc1fbf81">

                        Nachname

                    </label>

                    <div class="mwf-input">

                        <input id="mwf08d9bc1fbf81" name="nachname" class="mwf-text " data-mwf-id="mwf08d9bc1fbf81" type="text" value="">

                        <p class="mwf-error"></p>
                    </div>
                </li>
            </div>

            <div class="">

                <input id="versteckt" name="versteckt" data-mwf-id="mwf4531354a7b12" type="hidden" value="">
            </div>

            <div class="">

                <li data-mwf-container="mwf568b7206cb24" class="mwf-field ">
                    <label class="mwf-label">

                        Radio

                    </label>

                    <div class="mwf-input">

                        <fieldset data-mwf-fieldset="mwf568b7206cb24">

                            <span class="mwf-option"> <input id="mwf568b7206cb24_A" name="radio" class="mwf-radio" data-mwf-id="mwf568b7206cb24" type="radio" value="A">
                            <label for="mwf568b7206cb24_A">Option a</label>

                                <div class="clearfix"></div>

                        </span>

                            <span class="mwf-option"> <input id="mwf568b7206cb24_B" name="radio" class="mwf-radio" data-mwf-id="mwf568b7206cb24" type="radio" value="B">
                            <label for="mwf568b7206cb24_B">Option 2</label>

                                <div class="clearfix"></div>

                        </span>

                        </fieldset>

                        <p class="mwf-error"></p>
                    </div>
                </li>
            </div>

            <div class="">

                <li data-mwf-container="mwf0364ecee4a3f" class="mwf-field  h-even">
                    <label class="mwf-label" for="mwf0364ecee4a3f">

                        Dropdown

                    </label>

                    <div class="mwf-input">

                        <select id="mwf0364ecee4a3f" name="dropdown" class="mwf-select mwf-multiple " data-mwf-id="mwf0364ecee4a3f">

                            <option id="mwf1eb0a105558d_DEmarketo_test" value="1">erster Wert</option>

                            <option id="mwf8dce584a8bef_DEmarketo_test" value="2">zweiter Wert </option>

                        </select>

                        <p class="mwf-error"></p>
                    </div>
                </li>
            </div>

        </ul>

        <ul>

            <li data-mwf-container="_finish_mwfdf9ed4d75291" class="mwf-button mwf-next">
                <input type="button" value="Submit" data-mwf-submit="{&quot;type&quot;:&quot;finish&quot;}" class="webtrekkHelper_observe" data-webtrekk-formsubmit="" data-webtrekk-linkid-area="Content" data-webtrekk-linkid-element="Button" data-webtrekk-linkid-name="Submit" data-webtrekk-linkid-target-append-base-contentid=".Success">
            </li>

        </ul>

        <ul>
            <li class="mwf-pager">
                <p>
                    <span>1</span>/<span>2</span>
                </p>
            </li>
        </ul>
    </div>
</form>

The Script I am running is,

<script>

  MktoForms2.loadForm("https://app-lonXX.marketo.com", "162-XXX-XXX", 10XX);
  var customForm = document.querySelector("#commandDEsk2_form"),

  customFormButton = customForm.querySelector("input[type='button']");

  if (customFormButton!= null) {

  customFormButton.addEventListener("click",function(customFormSubmitEvent){ 
  customFormSubmitEvent.preventDefault();   
  customFormButton.disabled = true;

  MktoForms2.whenReady(function(mktoForm) {    

      mktoForm.addHiddenFields({    
           "FirstName": customForm.querySelector("#mwf23e481e7bdc0").value,
           "LastName": customForm.querySelector("#mwf08d9bc1fbf81").value
         });

      mktoForm.submit();  
      });
     });
     }
   </script>

Error :

Uncaught TypeError: Cannot read property 'querySelector' of null