Jquery Post not working correctly?

Question

I have been working on Like and Unlike feature with jquery, ajax and php. My problem is little bit difficult to understand. Lets try to understand it first.

---

I have 2 php pages, viewProfile.php and LikeMail.php. LikeMail.php is being called by ajax function in viewProfile.php.

Here is Section of viewProfile.php page's description

                             -----------------
                            |   Like/Unlike   |
                             -----------------

Here is button which actually comes from LikeMail.php by this ajax function

function like()
{
    var req  = new XMLHttpRequest();
    req.onreadystatechange = function()

    {
        if(req.readyState==4 && req.status==200)
        {
            document.getElementById('Like').innerHTML=req.responseText;

        }
    }
    req.open('POST','LikeMail.php','true');
    req.send();
}
setInterval(function(){like()},1000);

HTML:

<div id="Like"></div>

Output is being shown here in this div. Button above may be Like or Unlike depends on the condition in LikeMail.php which will be described below in LikeMail.php description section.

When one of them (buttons) Like or Unlike is clicked. It then calls respective jquery click function which sends post request to LikeMail.php.I have mentioned Indirect page in title because Like or Unlike buttons actually exists in LikeMail.php page. But due to ajax call these buttons are being shown in viewProfile.php page. So I then send post requests through viewProfile.php to actual page LikeMail.php

It is jquery post for Unlike button

$(document).ready(function(){

    $('#Unlike').unbind().click(function(){
        $.post("LikeMail.php",
            {Unlike: this.id},
            function(data){
                $('#response').html(data);
            }

        );

    });

});

It is jquery post or Like button

$(document).ready(function(){

    $('#Like').unbind().click(function(){
        $.post("LikeMail.php",
            {Like: this.id},
        function(data){
            $('#response').html(data);
        }
        );

    });

});

End of description section of viewProfile.php page

---

Here is Section of LikeMail.php page's description

Like or Unlike button is shown in viewProfile.php page depends upon this code:

$check_for_likes = mysqli_query($conn, "SELECT * FROM liked WHERE user1='$user1' AND user2='$user2'");
                $numrows_likes = mysqli_num_rows($check_for_likes);
                if (false == $numrows_likes) {
                    echo mysqli_error($conn);
                }

                if ($numrows_likes >= 1) {
                    echo '<input type="submit" name="Unlike" value="Unlike" id="Unlike" class="btn btn-lg btn-info edit">';


                }

                elseif ($numrows_likes == 0) {
                    echo '<input type="submit" name="Like" value="Like" id="Like" class="btn btn-lg btn-info edit">';
                }

Button depends upon these two above conditions.

Now when Like button is clicked, post request from viewProfile.php comes here

if(isset($_POST['Like']))   //When Like button in viewProfile.php is clicked then this peace of code inside if condition should run and insert some record in database
            {
                $total_likes = $total_likes+1;
                $like = mysqli_query($conn, "UPDATE user SET user_Likes = '$total_likes' WHERE user_id = '$user2'");
                $user_likes = mysqli_query($conn, "INSERT INTO liked (user1,user2) VALUES ('$user1','$user2')");
                $query3 = "INSERT INTO notification (user1, user2, alert, notificationType) VALUE ('$user1','$user2','unchecked','like')";
                if (mysqli_query($conn, $query3)) {
                    echo "Like";
                } else {
                    echo mysqli_error($conn);
                }

            }

Similarly when Unlike button is clicked. This peace of code should run.

if(isset($_POST['Unlike'])) //This is the condition for Unlike button. It should delete record from databse
            {
                $total_likes = $total_likes-2;
                $like = mysqli_query($conn, "UPDATE user SET user_Likes='$total_likes' WHERE user_id='$user2'");
                $remove_user = mysqli_query($conn, "DELETE FROM liked WHERE user1='$user1' AND user2='$user2'");
                $query3 = "DELETE FROM notification WHERE user1='$user1' AND user2='$user2' AND notificationType='like'";

                $check = mysqli_query($conn, $query3);
                if ($check) {
                    echo "Unlike";
                } else {
                    echo mysqli_error($conn);
                }
            }

Problem:
Main problem which I faced is that when I click Like or Unlike both executes the condition of Like button code. Both inserts the data into database as Unlike condition should delete data from database but it also inserts data as condition for Like button do. Kindly can you please help me that how to tackle this problem. Thanks in advance!

Update:
When I delete all the respective code for Like button. The condition for Unlike button starts working correctly.

Answer 1

I think there's a duplicated ID somewhere, perhaps the DIV. Take a look at this.

<div id="Like_2"></div>

<input type="submit" name="Unlike" value="Unlike" id="Unlike" class="btn btn-lg btn-info edit">

<input type="submit" name="Like" value="Like" id="Like" class="btn btn-lg btn-info edit">

<div id="response"></div>


$(document).ready(function(){
    $(document).on('click','#Unlike', function(){
        $('#response').html(this.id);
        //ajax call

    });
    $(document).on('click','#Like', function(){
        $('#response').html(this.id);
        //ajax call

    });
});

And the javascript function:

function like()
{
    var req  = new XMLHttpRequest();
    req.onreadystatechange = function()

    {
        if(req.readyState==4 && req.status==200)
        {
            document.getElementById('Like_2').innerHTML=req.responseText;

        }
    }
    req.open('POST','LikeMail.php','true');
    req.send();
}
setInterval(function(){like()},1000);

https://jsfiddle.net/wx38rz5L/2103/