Trigger click one specific element from elements with the same ID

Question

I'm building a script with the post like feature just like instgram (double click on image to trigger the heart button) The problem is that when i click twice on the image all the posts on feed get liked if you know what i mean, because they have all the same button id.

this is the js line

    /* Handler for doubleclick on the photo */
    $(document.body).on('dblclick', '.post-image', function() {
    $(this).parent().parent().parent().find('.like-button').trigger('click');
    $(this).fadeTo('fast', 0.5).fadeTo('fast', 1.0);
  });

I just want to add for example some filters that check the post that i click on it

I'm using data-photo-id to get the photo id then insert it to an object then after that making an ajax request to store the like to database

This is the processing file (php) :

/* Get the photo id */
$target_id = (int) $_POST['photo_id'];

/* Check if the like is set or not already */
$like_status = Database::simple_get('id', 'associations', ['first_id' => $account_user_id, 'second_id' => $target_id, 'type' => 'PHOTO', 'sub_type' => 'LIKE']);

/* Remove the like from the database */
if($like_status) {
    $database->query("DELETE FROM `associations` WHERE `type` = 'PHOTO' AND `sub_type` = 'LIKE' AND `first_id` = {$account_user_id} AND `second_id` = {$target_id}");
    echo 'deleted';
}

/* Insert the like in the database */
else {
    /* Get the user_id of the photo owner */
    $photo_user_id = Database::simple_get('user_id', 'photos', ['photo_id' => $target_id]);

    $database->query("INSERT INTO `associations` (`type`, `sub_type`, `first_id`, `second_id`) VALUES ('PHOTO', 'LIKE', {$account_user_id}, {$target_id})");

    if($account_user_id != $photo_user_id) {
        Notifications::insert($account_user_id, $photo_user_id, 'PHOTO_LIKE', $target_id);
    }

    echo 'inserted';
}

HTML POST CODE :

<div class="row">
   <div id="panel" class= 'we-post-panel panel'>
      <!--start post header-->
      <div class='we-post-header'>
         <a href='profile/<?php echo $data->username; ?>'><img src='<?php echo self::display_image(AVATARS_THUMBS_ROUTE . $data->avatar); ?>'></a>
         <a href='profile/<?php echo $data->username; ?>' class='user'>
         <?php echo $data->username; ?></a><?php if($data->verified): ?>
         <i class="fas fa-badge-check we-post-header-verified" title="<?php echo $language->profile->display->verified; ?>"></i>
         <?php endif; ?> 
         <?php if(User::logged_in()): ?>
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         <i class="far fa-ellipsis-h menu-icon"></i>
         </a>
         <ul class="dropdown-menu">
            <li><a href="photo/<?php echo $data->photo_id; ?>" target="_blank"><i class="fa fa-link fa-fw"></i>
               <span>Open in new tab</span></a>
            </li>
            <li role="separator" class="divider"></li>
            <?php if((User::logged_in() && $data->user_id == $account->user_id)): ?> 
            <li>
               <a class="clickable dashboard-delete" data-photo-id="<?php echo $data->photo_id; ?>"><i class="fa fa-trash fa-fw"></i>
               <span>Delete</span></a>
            </li>
            <?php endif; ?>
            <?php if((User::logged_in() && $data->user_id !== $account->user_id)): ?>
            <li><a class="clickable dashboard-report" data-photo-id="<?php echo $data->photo_id; ?>"><i class="fa fa-bug fa-fw"></i>
               <span>Report</span></a>
            </li>
            <?php endif; ?>
         </ul>
         <?php endif; ?>
      </div>
      <!--end post header-->
      <div class='we-post-image post-image'>
         <i class="double-click-heart-icon"></i>
         <img src="<?php echo self::display_image(PHOTOS_ROUTE . $data->photo); ?>" class="we-post-image-container img-responsive animated fadeIn"/>
      </div>
      <div class='we-post-footer'>
         <!--start post reaction-->
         <div class='we-post-react'>
            <i class="heart-icon clickable we-heart-icon <?php if($like_status) echo 'hearted-icon'; ?> like-button" data-photo-id="<?php echo $data->photo_id; ?>"></i>
            <i class="comment-icon clickable"></i>
            <?php if(User::logged_in()): ?>
            <i class="repost-icon clickable dashboard-repost" data-photo-id="<?php echo $data->photo_id; ?>"></i>
            <?php endif; ?>
         </div>
         <!--end post reaction-->
         <div class="dashboard-likes" data-photo-id="<?php echo $data->photo_id; ?>">
            <a class="clickable likes-color no-underline"><?php printf($language->home->display->likes, self::get_likes($data->photo_id)); ?></a>
         </div>
         <!--start post caption-->
         <div class="we-post-caption">
            <?php if(!empty($data->content)): ?>
            <ul>
               <h2 class="comment-display">
                  <a class="comment-username-style comment-username no-underline" href="profile/<?php echo $data->username; ?>"><?php echo $data->username; ?></a>
               </h2>
               <span><?php echo Messages::generate_emoticons(User::generate_links($data->content));?>
               </span>
            </ul>
            <?php endif; ?>
         </div>
         <!--end post caption-->
         <!-- start show more-->
         <?php if($comments_count > $settings->comments_pagination): ?>
         <div><a class="no-underline load-more-comments" data-limit="<?php echo self::$comments_limit - $settings->comments_pagination; ?>" data-previous-limit="<?php echo self::$comments_limit; ?>" data-photo-id="<?php echo $data->photo_id; ?>">
            Load more comments</a>
         </div>
         <?php endif;?>
         <!-- end show more-->
         <div class="comments-container">
            <?php echo Photos::display_comments($data->photo_id, ['limit' => 'LIMIT ' . ((self::$comments_limit)) . ', ' . $settings->comments_pagination, 'where' => null]); ?>
         </div>
         <a class="time no-underline">
         <time class="time-size timeago" datetime="<?php echo date('c', $data->timestamp); ?>" title="<?php echo date('c', $data->timestamp); ?>"></time>
         </a>
         <div class='comment-section'>
            <input id="comment" type="text" name="comment" class='we-comment dashboard-input' placeholder='Add a comment...' data-photo-id="<?php echo $data->photo_id; ?>">
            <span class='dot'></span>
         </div>
      </div>
   </div>
</div>

AJAX :

/* Like (normal post) */
$(document.body).on('click', '.button-like', function() {

    /* Determine the current box */
    var $container = $(this).closest('#panel');

    /* Get the photo id from the input field */
    var photo_id = $(this).data('photo-id');

    /* Set the data into an object */
    var post_data = { 'type' : 'like', 'photo_id' : photo_id }


        /* Post the data */
        $.post('processing/process/photo.php', post_data, function(data) {

            /* Try to block out some possible spamming */
                if(data == 'deleted') {
                    $container.find('.like-button').removeClass('hearted-icon').addClass('heart-icon');
                    $container.find('.dashboard-likes-count').html(parseInt($container.find('.dashboard-likes-count').html())-1);
                }

                else if(data == 'inserted') {
                    $container.find('.like-button').removeClass('heart-icon').addClass('hearted-icon');
                    $container.find('.dashboard-likes-count').html(parseInt($container.find('.dashboard-likes-count').html())+1);
                }

        });

});

Answer 1

please share your html code as well because your code is selecting all the like buttons, there must be a way to select the like button of clicked post.

$(this).parent().parent().parent().find('.like-button').trigger('click');

The above piece of selector code is causing the issue.

The solution is

$('.post-image').on('dblclick', function() {
    $(this).next().find('.like-button').trigger('click');
    $(this).fadeTo('fast', 0.5).fadeTo('fast', 1.0);
});

This should work.

An illustration can be seen in the below fiddle.

 $('.c1').on('dblclick', function() { $(this).next().css({'background-color': 'pink'}); }); 

 .c1, .c2, .c3 { width: 100px; height: 100px; background-color: red; margin: 10px; } .c2 { background-color: blue; } .c3 { background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> 

Answer 2

Try next() selector instead of Parent()

$('.post-image').on('dblclick', function() {
        $(this).next().find('.like-button').trigger('click');
        $(this).fadeTo('fast', 0.5).fadeTo('fast', 1.0);
});