How to insert a jquery listview populated from a json file to mysql using php

Question

I am working on a jquery mobile app to allow recruitment agent to interact with job seekers through a mobile app. On the job link I decided to enter different vacant jobs on the app dynamically using json and I am able to enter jobs in json file and it uploads them to the app without any problem.

But I am trying to allow the current logged user to select a job that is where I need to use php to help insert data from the listview to mysql database. I am attaching the files to get any assistance from you.thanks in advance

my json code

[
 {"jobtype":"IT project manager",
  "city":"Johannesburg",
  "message":"We are looking for a manager at go fish company to manage the IT departments",
  "details":"We are looking for a manager at go fish company to manage the IT department and thank you",
  "jobid":"IT1"
  },

  {"jobtype":"Geologist",
  "city":"Captown",
  "message":"We are looking for an experienced Geologist to join a mining comapy established in congo.",
   "details":"We are looking for a manager at go fish company to manage the IT department,but it will be more beneficial for soemone who has done engineering,even those who have not finished yet but have enough experience in the trade they are welcome as long as they can do the job,the position is widely open for you to apply.so for any question contact patrick at 063167888.good luck",
    "jobid":"GE1"
  },
   {"jobtype":"Librarian",
  "city":"Johannesburg",
  "message":"We are looking for an experienced librarian to handle the library in sandton city.",
   "details":"We are looking for a manager at go fish company to manage the IT department",
    "jobid":"LI1"
  }
]

my jquery mobile codes

<div data-role="page" id="page5" data-add-back-btn="true">
    <div data-role="header">
        <h1>Services</h1>
    </div>

    <div data-role="content">
    <h4><span class="glyphicon glyphicon-user"></span>
        <?php  echo 'Welcome '.$_SESSION['name'];

        echo "<br><a href='logout.php' data-ajax='false'>Logout</a>"; ?> ...</h4> 

      <ul data-role="listview" data-inset="true"  data-filter="true" id="jobList">

    </ul>
    </div>   
    <div data-role="footer">
        <h4>&copy;2016 &bull; Genesis M&C Holdings Pty</h4>
    </div>
</div>
<script type="text/javascript">

 $.getJSON("http://localhost:8080//recruitment//jobdetails.json", function(jobs){
   //Start off with an empty list every time to get the latest from server
   $('#jobList').empty();

   //add the job items as list
   $.each(jobs, function(i, job){
     $('#jobList').append(generateJobLink(job));
   });

   //refresh the list view to show the latest changes
  $('#jobList').listview('refresh');

 });

  //creates a job link list item
 function generateJobLink(job){

  //debugger;
  return '<li><a href="javascript:void(0)'
         + '" onclick="goToJobDetailPage(\''
         + job.jobtype 
         + '\',\''
         + job.city 
         + '\',\''
          + job.message 
         + '\',\''
          + job.details 
         + '\',\''
          + job.jobid 
         + '\',\''


         + job.jobid +'\')">' 
         + job.jobtype+"<h3></h3>"
          + job.city +"<p><strong><br>"
           + job.message +"<h4></h4>"

         + '</a></li>';
  }

  function goToJobDetailPage(jobType,jobCity,jobMessage,jobDetails,jobId){

   //create the page html template
   var jobPage = $("<div data-role='page' data-url=dummyUrl> <div data-role='header'><h1>"
                   + 'Job Details' + "</h1></div><div data-role='content'><strong><form style='border:dotted 1px #CCC' action='jobapp.php' method='post' data-ajax='false'>" 
                   + jobType + "</strong><h6>" 
                    + jobId + "</strong><h6>"
                   + jobCity +"</h6><p>"  
                   + jobDetails +"</P> <div class='col-lg-10 text-center'><button type='submit' class='btn btn-warning' id='appbtn' name='appbtn' data-role='none'><span class='glyphicon glyphicon-envelope'></span>&nbsp;Apply</button><span>&nbsp</span><button type='submit' class='btn btn-danger' id='favbtn' name='favbtn' data-role='none'><span class='glyphicon glyphicon-star'></span>&nbsp;Favorite</button></div></div><div data-role='footer'><h4>" 
                   + '&copy;2016 &bull; Genesis M&C Holdings Pty' + "</h4></div></div>");

   //append the new page to the page container
   jobPage.appendTo( $.mobile.pageContainer );

  //go to the newly created page
  $.mobile.changePage( jobPage );
  }  

</script> 

my php codes

<?php //data.php
include_once 'Dbconnect.php'; 
if (isset($_POST['appbtn'])){
    // Get values from form

    $JobsId=json_decode($_post['jobid']);
    $JobTitle=json_decode($_post['jobtype']);
    $JobCity=json_decode($_post['city']);

    // Insert data into mysql

    $sql="INSERT INTO jobs (jobid,jobtitle,jobcity,datetime)
          VALUES ('$JobsId ', '$JobTitle','$JobCity',now()) ";
    $result = mysql_query($sql);

    // if successfully insert data into database, displays message "Successful".
    if($result){
        header("Location: index.php#page4?message=success");
        echo"successfully registered";
    } else {
        echo "ERROR";
    }