Crud operations in ajax not working

Question

Using ajax in php I am trying to perform crud operations.... But unfortunately, my selection, insertion & updation operations do not work. Only deletion works fine. Could somebody guide me in understanding where I am going wrong?

Below are various files I have written:

home.php (The main file)

</body>
</html>

<script>
$(document).ready(function(){
    function fetch_data()
    {
        $.ajax({
            url:"select.php",
            method:"POST",
            success:function(data){
                $('#disp_data').html(data);
            }
        });
    }

    fetch_data();
    $(document).on('click','#add',function(){
        var name = $('#name').text();   //name & lname-table attribut names
        var lname= $('#lname').text();

        if(name =='')
        {
        alert("Enter name");
        return false;
        }

        if (lname=='')
        {
        alert("Enter last name");
        return false;
        }

        $.ajax({
        url:"insert.php",
        method:"POST",
        data:{name:name, lname:lname},
        dataType:"text",
        success:function(data)
        {
            alert(data);
            fetch_data();
        }
        })
        });

        function edit_data(id,text,column_name)
        {
        $.ajax({
            url:"update.php",
            method:"POST",
            data:{id:id, text:text, column_name:column_name},
        dataType:"text",
        success:function(data){
            alert(data);
        }
        });
        }

        $(document).on('blur','.name',function(){
        var id= $(this).data("id1");
        var name=$(this).text();
        edit_data(id,name,"name");
        });

        $(document).on('blur','.lname',function(){
        var id= $(this).data("id2");
        var lname=$(this).text();
        edit_data(id,lname,"lname");
        });

        $(document).on('click','#delete',function(){
        var id= $(this).data("id3");
        if(confirm("are you sure u want to delete"))
        {
            $.ajax({
        url:"delete.php",
        method:"POST",
        data:{id:id},
        dataType:"text",
        success:function(data){
            alert(data);
            fetch_data();
            }
            });
            }
            });
            });


</script>

select.php

<?php

$link=mysql_connect("localhost","root","");
mysql_select_db("db2017",$link);


$output='';
$sql="SELECT * FROM detail ORDER BY id DESC";
$result=mysql_query($sql);

$output .='

<div align="center">
<table border=5 width=600>
<tr>
<th width="40%">ID</th>
<th width="40%"> First Name</th>
<th width="40%"> Last Name</th>
<tr/>';


if(mysql_num_rows($result)>0)
{
    while($row=mysql_fetch_array($result))
    {
    $output .='
    <tr>
    <td>'.$row["id"].'</td>
    <td class="name" data-id1"'.$row["id"].'" contenteditedtable>'.$row["name"].'</td>
    <td class="lname" data-id2"'.$row["id"].'" contenteditedtable>'.$row["lname"].'</td>
    <td button type="button" name="delete_btn" data-id3="'.$row["id"].'" id="delete">Delete</button></td>
    <tr/>';
    }

    $output .='
    <tr>
    <td></td>
    <td id="name" contenteditedtable></td>
    <td id="lname" contenteditedtable></td>

    <td><button type="button" name="add">Add</button></td>
    <tr/>';

}
    else
    {
        $output .='<tr>
        <td colspan="4" > Data Not Found </td>
        </tr>';
    }

    $output .='</table>
    </div>';
    echo $output;

?>

insert.php

<?php
$link=mysql_connect("localhost","root","");
mysql_select_db("db2017",$link);
$sql="insert into detail(name,lname) values('".$_POST["name"]."' , '".$_POST["lname"]."')";

if(mysql_query($sql))
{
    echo 'Record added';
}
?>

update.php

<?php
$link=mysql_connect("localhost","root","");
mysql_select_db("db2017",$link);

$id= $_POST["id"];
$text=$_POST["text"];
$col_name=$_POST["column_name"];
$sql="update detail set".$col_name."='".$text."' where id='".$id."'";

if(mysql_query($sql))
{

    echo "Data Updated";

}
?>