I am unable to connect php code through ajax when zepto.js (or even jquery) when I am using a template from app.js

Question

I am trying to create a mobile app with Cordova. However, I am unable to connect my file to the database (MySQL) since AJAX is unable to send the variable from the input to the PHP file that I have stored locally.

When I am using the code in an empty file, it is working perfectly, but not in the template file.
I have tried removing zepto.js and just using the jQuery, but it is not even showing me the alert that zepto is showing.
Using alert I am only getting empty variable (data) from the PHP page.

<input type="text" placeholder="write your first name" id="firstname">
<input type="text" placeholder="write your last name" id="lastname">
<button id="sub">Submit result</button>
<script src="zepto.js"></script>

$(document).ready(function(){
  $("#sub").click(function(){
    var firstname = $("#firstname").val();
    var lastname = $("#lastname").val();
    if($.trim(firstname).length >0 & $.trim(lastname).length >0) {
      $.ajax({
        type:"POST",  //Request type
        url: "firstname.php",   
        data:{firstname:firstname, lastname:lastname},
        cache:false,
        success:function(data) {
          alert(data);
        },
        failure: function() {
          alert("Nope");
        }
      })
    } else {
      alert('Cannot be empty');
    }
  })
})

<?php
  $firstname = $_POST['firstname'];
  $lastname = $_POST['lastname'];
  echo $firstname." ".$lastname;
?>