Ajax呼叫无法正常工作

                </div>
            </div>
        </div>
                <hr class="my12 outline-none baw0 bb bc-powder-2">
            <div class="grid fw-nowrap fc-black-600">
                    <div class="grid--cell mr8">
                        <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
                    </div>
                <div class="grid--cell lh-md">
                    <p class="mb0">
                        <b>Want to improve this question?</b> <a href="/posts/24935588/edit">Update the question</a> so it's <a href="/help/on-topic">on-topic</a> for Stack Overflow.
                    </p>
                    <p class="mb0 mt6">Closed <span title="2014-09-29 18:03:18Z" class="relativetime">5 years ago</span>.</p>
                </div>
            </div>
    </aside>

Ok guys, this is driving me insane, i had this working, but it seems im not grabbing any variables in my php file on my ajax call.. i echo out and only see no values... can anyone explain what im doing wrong here, i cannot find anything wrong,,

 var owner_name = $('#owner_name').html();
 var owner_email = $('#owner_email').html(); 
 var owner_mobile = $('#owner_mobile').html(); 
 var owner_phone = $('#owner_phone').html(); 

function jobcardCreate() {

$.ajax({
    dataType: 'json',
    url: './ajax/jobcard-send.php',
    type: 'POST',
    data: {
        owner_name: owner_name, 
        owner_email: owner_email, 
        owner_mobile: owner_mobile, 
        owner_phone: owner_phone,
        },       
    success: function(data) {

    }
});

 }

jobcard-send.php:

<?php

    include("../includes/connection.php");

    $owner_name = $_POST['owner_name'];
    $owner_email = $_POST['owner_email'];
    $owner_mobile = $_POST['owner_mobile'];
    $owner_phone = $_POST['owner_phone'];

    // Insert new data into users table
    $query  = " INSERT INTO"; 
    $query .= " owner";
    $query .= " (owner_name, owner_email, owner_mobile, owner_phone)";
    $query .= " VALUES";
    $query .= " ('{$owner_name}', '{$owner_email}', '{$owner_mobile}', '{$owner_phone}')";

    echo $owner_name;
    echo $query; 

    $result = mysqli_query($connection, $query);

    //Check if there was an error with the query
     if ($result) {
        echo json_encode(array("status" => "$owner_name"));
    } else {
        echo "Database query failed, " . mysqli_error($connection) . "";
    }   

?>

wasted many many hours on this already, after i had it working, :/

Here is the html:

    <div class="card-content one-third">
        <div class="list-title thin">Owner Contact</div>
        <ul class="detail-list">
            <li class="button rounded"><a class="list-heading">Name:</a> <a id="owner_name" class="list-result-edit" contenteditable="true"></a></li>
            <li class="button rounded"><a class="list-heading">Email:</a> <a id="owner_email" class="list-result-edit" contenteditable="true"></a></li>
            <li class="button rounded"><a class="list-heading">Mobile No:</a> <a id="owner_mobile" class="list-result-edit" contenteditable="true"></a></li>
            <li class="button rounded"><a class="list-heading">Phone No:</a> <a id="owner_phone" class="list-result-edit" contenteditable="true"></a></li>
        </ul>
    </div>

</div>