Есть ли способ создания нескольких похожих форм на странице?

Question

У меня есть несколько изображений на странице, которые я надеюсь иметь кнопку «Мне нравится» на каждом. Прямо сейчас он работает до определенного момента, по щелчку обновляет базу данных понравившегося изображения и изменяет изображение на красное сердце, но происходит 2 вещи:

1. При нажатии на одну кнопку «Нравится» она отключает все из них, но только одна нажата будет зафиксирована в базе данных.
2. Я не могу щелкнуть снова, в отличие от.

Я пытался использовать jQuery и Ajax, при нажатии кнопки «Мне нравится / сердцу» он затем изменит все параметры с помощью «attr», чтобы отразить непохожую форму.

// Вот форма для кнопки «Мне нравится»

<form class='like_form_p' name='like' action='/like.php' method='post'>
    <input type='hidden' style='display:none;' name='aid' id='aid' value='".$results['aID']."'>
    <input type='hidden' style='display:none;' name='uid' id='uid' value='".$uid."'>
    <input type='hidden' style='display:none;' name='currenturl' id='currenturl' value='".$currentURL."'>
    <input type='hidden' style='display:none;' name='pId' id='pId' value='".$cover['pId']."'>
    <input type='image' class='like_btn' src='/images/heart.png' alt='submit' width='24' height='20'>
</form>

// Вот форма для кнопки непохожести

<form class='unlike_form_p' name='unlike' action='/unlike_cover.php' method='post'>
    <input type='hidden' style='display:none;' name='aid' id='aid' value='".$results['aID']."'>
    <input type='hidden' style='display:none;' name='uid' id='uid' value='".$uid."'>
    <input type='hidden' style='display:none;' name='currenturl' id='currenturl' value='".$currentURL."'>
    <input type='hidden' style='display:none;' name='pId' id='pId' value='".$cover['pId']."'>
    <input type='image' class='like_btn' src='/images/heart_a.png' alt='submit' width='24' height='20'>
</form>

// Вот скрипт jQuery, который запускается

<script>
function like()
{   
    $('.like_form_p').attr('action', '/unlike.php');
    $('.like_form_p').attr('class', 'unlike_form_p');
    $('.like_btn').attr('src', '/images/heart_a.png');
};
function unlike()
{
    $('.unlike_form_p').attr('action', '/like.php');
    $('.unlike_form_p').attr('class', 'like_form_p');
    $('.like_btn').attr('src', '/images/heart.png');
};

$(document).ready(function(){

    $('.like_form_p').on('submit', function(event){
        event.preventDefault();
        var form_data = $(this).serialize();
        console.log(form_data);
        $.ajax({
            url:'/like.php',
            method:'POST',
            data:form_data,

            success:function(data)
            {   
                like()
            },
            error:function(xhr, status, error)
            {
                alert("I have failed");
            }
        })
    })
});

$(document).ready(function(){

    $('.unlike_form_p').on('submit', function(event){
        event.preventDefault();
        var form_data = $(this).serialize();
        console.log(form_data);
        $.ajax({
            url:'/unlike.php',
            method:'POST',
            data:form_data,

            success:function(data)
            {
                unlike()
            },
            error:function(xhr, status, error)
            {
                alert("I have failed");
            }
        })
    })
});
</script>

Я ожидал, что это сработает один Ajax, затем, как только все детали будут изменены в форме с помощью функции Like / Different, он сможет запустить другой AJAX.

Но на самом деле я получил один клик, который сработал от одного ajax, все подобные кнопки активированы, и я не могу щелкнуть его снова.