jQuery一个接一个地影响元素，而不是影响被点击的元素

Question

I'm echoing out a number of div tags dynamicaly like:

foreach($applications as $application){
    $id =  $application->user_id;
    echo '<div class="col-md-4" id="'.$id.'">',
              '<h4 class="list-group-item-heading remove-margin">
                    <i class="fa fa-plus fa-fw" id="'.$id.'"> </i>
               </h4>',
         '</div>';
}

i want to make it so that when a user clicks the plus button in a selected div, then only that div is affected. So far when I do that, it affects the elements in sequential order, nomatter which plus I click. here's the jQuery:

 $(document).ready(function(){
            $('.fa-plus').click(function(){
                    counter = 0;
                    id      = $(this).closest('div').prop("id");
                    counter = counter+1;
                    $(this).css('color','green');
                    $('#votes-count').parent().html(counter);
                    alert(id);                  
            });

    });

Answer 1

You can use the event object from the click event to get the id of the clicked element.

$(document).ready(function(){
        $('.fa-plus').click(function(evt){
                counter = 0;
                id      = evt.target.id;

                if($(this).attr("id") != id){
                    return;
                }

                counter = counter+1;
                $("#" + id).css('color','green');
                $('#votes-count').parent().html(counter);
                alert(id);                  
        });
});

You can refer here for more info about the event object that is passed.