AJAX/JavaScript/PHP/HTML Contact user list (similar to a phone) but just using regular sqllite3 server for now

So, I am trying to finish a little project and I am having trouble with AJAX and PHP getting the info to the server, and populating the list in html too. The info under

var removePerson = function (personObject) {
// TODO run the ajax call
// TODO wait for it to be done
setTimeout(function () {
  // Rerender the list
  var response = [
    {
      firstname : "Robert",
      lastname : "blah",
      phone : "555-555-5555"
    },
    {
      firstname : "Ku",
      lastname : "Robinson",
      phone : "559-552-5551"
    }
  ];

and

 var response = [
        {
          firstname : "Robert",
          lastname : "blah",
          phone : "555-555-5555"
        },
        {
          firstname : "Ian",
          lastname : "blah",
          phone : "558-552-5551"
        },
        {
          firstname : "Ku",
          lastname : "Robinson",
          phone : "559-552-5551"
        }
      ];

is just sample list info but I know I need to populate it differently since it will be through the server so that info won't be there and it will instead be populated with the inputs

so here is the html I have so far

<b>
    <div class="wrap">
      <div class="mainhead">
        <header class="headmain">
          <div id="top-bar">
              <div id="top-nav">
                <ul></ul>
              </div>
          </div>
        </header>
      </div>

      <div class="middlenav">
        <div id="nav">
          <form id="info" action="#" method="get">

            <div class="field">
              <input type="text" name="firstname" id="firstname" placeholder="First Name" >
            </div>

            <div class="field">
              <input type="text" name="lastname" id="lastname" placeholder="Last Name" >
            </div>

            <div class="field">
              <input type="number" name="phone" id="phone" placeholder="Phone #" >
            </div>

            <div style="display: none;" id="saving-message">
              Saving user...
            </div>

            <div style="display: none;" id="success-message">
              User added!
            </div>

            <div class="field">
              <input id="submitbtn" type="submit" value="Add Contact">
            </div>

          </form>
        </div>
      </div>

      <div class="people">
        <div id="loading-message" style="display: none;">Loading users...</div>

        <ul id="personsinfo">
        </ul>
      </div>

    </div>
</b>

and the script

$(document).ready(function () {

      // clears the list, and rerenders it with new data
      var updateList = function (data) {
        var list = $("#personsinfo");
        list.empty();
        jQuery.each(data,function (index,item) {
          var template = _.template($("#item").html());
          var html = template(item);
          var li = $("<li />").
            html(html);
          li.data("person",item);
          li.appendTo(list);
        });
      };

      var disableForm = function () {
        $("#submitbtn").attr("disabled","disabled");
      };

      var enableForm = function () {
        $("#submitbtn").removeAttr("disabled");
      };

      var removePerson = function (personObject) {
        // TODO run the ajax call
        // TODO wait for it to be done
        setTimeout(function () {
          // Rerender the list
          var response = [
            {
              firstname : "Robert",
              lastname : "blah",
              phone : "555-555-5555"
            },
            {
              firstname : "Ku",
              lastname : "Robinson",
              phone : "559-552-5551"
            }
          ];

          updateList(response);
        },2000);
      };

      $("form").on("submit",function (event) {
        // TODO show a message
        $("#saving-message").toggle();

        // TODO Prevent additional form submission
        disableForm();

        console.log($("form").serialize());
        // TODO send the request
        // TODO wait for the response

        setTimeout(function () {
          // TODO unlock the form
          enableForm();

          // TODO hide the loading message
          $("#saving-message").toggle();

          // TODO clear the form out
          $("form")[0].reset();

          // Refocus the form
          $("form input[type='text']").first().focus();

          // TODO on response, show a success message
          $("#success-message").show().delay(3000).fadeOut();

          var response = [
            {
              firstname : "Robert",
              lastname : "blah",
              phone : "555-555-5555"
            },
            {
              firstname : "Ian",
              lastname : "blah",
              phone : "558-552-5551"
            },
            {
              firstname : "Ku",
              lastname : "Robinson",
              phone : "559-552-5551"
            }
          ];

          updateList(response);

        },0);
        //
        // TODO Update the stuff in the list to show the new item
        // TODO stretch goal, show errors if any

        event.preventDefault();
      });

      $(document).on("click",".delete",function () {
        // show confirm / cancel
        $(this).
          closest("li").
          addClass("confirming");
      });

      $(document).on("click",".confirm",function () {
        // TODO hide dialog
        $(this).
          closest("li").
          removeClass("confirming").
          addClass("removing");

        var person = $(this).data("person");
        removePerson(person);
      });

      $(document).on("click",".cancel",function () {
        // TODO hide dialog
        $(this).
          closest("li").
          removeClass("confirming");
      });


      // show a loading message
      $("#loading-message").show();

      // Disable the form
      disableForm(); 

      // TODO load data

      // wait for data
      setTimeout(function () {
        // hide loading message
        $("#loading-message").fadeOut();

        // Enable the form
        enableForm();

        // run update list
        updateList([
          {
            firstname : "Robert",
            lastname : "blah",
            phone : "555-555-5555"
          },
          {
            firstname : "Ian",
            lastname : "blah",
            phone : "558-552-5551"
          }
        ]);
      },1000);

    });

Help with the mysql table would be greatly appreciated too. I know it's a lot though :/