Not able to save data in list using Ajax

I'm trying to insert data in SharePoint list using Ajax, but this isn't working. Below is the code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">  
    var siteUrl = 'http://hks:40867/';  


    function createListItem() {  
        var empId = $("#txtEmployeeId").val(); 
        var firstName = $("#txtFirstName").val();  
        var lastName = $("#txtLastName").val();  
        var state = $("#txtState").val();  
        var city = $("#txtCity").val();  
         $.ajax  
        ({  
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('HKS')/",  
        type: "POST",  
        data: JSON.stringify  
        ({  
            __metadata:  
            {  
                type: "SP.Data.TestListItem"  
            },  
            EmployeeID: empId,  
            FirstName: firstName,
            LastName: lastName,
            City:city,
            State: state    
        }),  
        headers:  
        {  
            "Accept": "application/json;odata=verbose",  
            "Content-Type": "application/json;odata=verbose",  
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
            "X-HTTP-Method": "POST"  
        },  
        success: function(data, status, xhr)  
        {  
            window.alert('Success') ;
        },  
        error: function(xhr, status, error)  
        {  
             window.alert('Fail') ;
        }  
    });  
       }


    function ClearFields() {  
        document.getElementById('txtCity').value = "";  
        document.getElementById('txtEmployeeId').value = "";  
        document.getElementById('txtFirstName').value = "";  
        document.getElementById('txtLastName').value = "";  
        document.getElementById('txtState').value = "";  
    }  
</script> 
<div>  
    <table cellpadding="10">  
        <tr>  
            <td colspan="2" align="center">  
                <label style="width: 200px; height: 50px; font-size: large; font: bold;">Employee Details</label>  
            </td>  
        </tr>  
        <tr>  
            <td>  
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">Employee ID</label>  
            </td>  
            <td>  
                <input type="text" id="txtEmployeeId" style="width: 100px;" />  
            </td>  
        </tr>  
        <tr>  
            <td>  
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">First Name</label></td>  
            <td>  
                <input type="text" id="txtFirstName" style="width: 100px;" /></td>  
        </tr>  
        <tr>  
            <td>  
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">Last Name</label></td>  
            <td>  
                <input type="text" id="txtLastName" style="width: 100px;" /></td>  
        </tr>  
        <tr>  
            <td>  
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">State</label></td>  
            <td>  
                <input type="text" id="txtState" style="width: 100px;" /></td>  
        </tr>  
        <tr>  
            <td>  
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">City</label></td>  
            <td>  
                <input type="text" id="txtCity" style="width: 100px;" /></td>  
        </tr>  
        <tr>  
            <td>  
                <input type="button" id="btnSave" value="Save" onclick="createListItem();" />  

            </td>  
            <td>  
                <input type="button" id="btnCancel" value="Cancel" onclick="ClearFields();" />  
            </td>  
        </tr>  
    </table>  

</div>