How to dynamically store geolocation data in localstorage, retrieve and display

Question

I have an app that allows a user to submit a form, saves it to local storage and afterwards displays the input in an html table. The user can update and delete their data. My question is that the form also displays the user's geolocation but I'm unable to store that data into local storage. The code for the geolocation data in the html file looks like this;

<form id="formStorage">
                 <ul>
                    <li>
                        <label for="txtTitle">Title:</label>
                        <input type="text" id="txtTitle"/>
                    </li>
                    <li>
                        <label for="txtEntry">Entry:</label>
                        <textarea id="txtEntry"></textarea>
                    </li>
                    <li>
                        <input type="submit" value="Save" id="btnSave"/>
                    </li>   
                 </ul>


                 <dl> 
                    <dt>Geolocation Status</dt>
                    <dd id='status'>Your Coordinates</dd>

                    <dt>Latitude</dt>
                    <dd id='eLatitude'>NA</dd>

                    <dt>Longitude</dt>
                    <dd id='eLongitude'>NA</dd>
                </dl>
            </form>

            <!--  Geolocation coordinates & error message handling -->
           <script>
               if (navigator.geolocation) {
                   navigator.geolocation.watchPosition(
                        function (pos) {
                            $("#status").text("OK");
                            $("#eLatitude").text(pos.coords.latitude);
                            $("#eLongitude").text(pos.coords.longitude);
                        },
                        function (err) {
                            $("#status").text("ERROR: "+ err.message);      
                        }
                   )
               }
               else {
                   $("#status").text("Geolocation is not supported in this browser");
               } 
           </script> 


<table id="tblStorage">

</table>

There is a javascript file that is called on form submit running Add, Edit, Delete and List functions which dynamically populates the table tag. The functions work for the form input variables but not for the geolocation data variables. I've tried multiple iterations. Can someone tell me what is missing?

            $(function(){

var selected_index = -1; //Index of the selected list item

var tableEntries = localStorage.getItem("tableEntries");//Retrieve the stored data

tableEntries = JSON.parse(tableEntries); //Converts string to object

if(tableEntries == null) //If there is no data, initialize an empty array
    tableEntries = [];

function Add(){
    var writing = JSON.stringify({
        Title    : $("#txtTitle").val(),
        Entry  : $("#txtEntry").val().
        Latitude : $("#eLatitude").val(),
        Longitude: $("#eLongitude").val()
    });
    tableEntries.push(writing);
    localStorage.setItem("tableEntries", JSON.stringify(tableEntries));
    alert("The entry was saved.");
    return true;
}

function Edit(){
    tableEntries[selected_index] = JSON.stringify({
            Title    : $("#txtTitle").val(),
            Entry  : $("#txtEntry").val(),
            Latitude : $("#eLatitude").val(),
            Longitude: $("#eLongitude").val()
        });
    localStorage.setItem("tableEntries", JSON.stringify(tableEntries));
    alert("The entry was edited.")
    operation = "A"; //Return to default value
    return true;
}


function List(){        
    $("#tblStorage").html("");
    $("#tblStorage").html(
        "<thead>"+
        "   <tr>"+
        "   <th></th>"+
        "   <th>Title</th>"+
        "   <th>Entry</th>"+
        "   <th>Latitude</th>"+
        "   <th>Longitude</th>"+
        "   </tr>"+
        "</thead>"+
        "<tbody>"+
        "</tbody>"
        );
    for(var i in tableEntries){
        var writ = JSON.parse(tableEntries[i]);
        $("#tblStorage tbody").append("<tr>"+
                            "   <td><img src='edit.png' alt='Edit"+i+"' class='btnEdit'/><img src='delete.png' alt='Delete"+i+"' class='btnDelete'/></td>" + 
                            "   <td>"+writ.Title+"</td>" + 
                            "   <td>"+writ.Entry+"</td>" + 
                            "   <td>"+writ.Latitude+"</td>" + 
                            "   <td>"+writ.Longitude+"</td>" + 
                            "</tr>");
    }
}