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

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);                  
            });

    });

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.

You could also iterate for each fa-plus, and bind the click on each of them.

Als access the id with attr instead of prop

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

You have elements with duplicated ids: <div class="col-md-4"> and <i class="fa fa-plus fa-fw"></i>

Please check my jsfiddle. You need to fix the selectors with you HTML structure.

Good luck ;)

First of all, the same ID multiple times is not allowed. An ID is always unique. So you could do something like this with classes:

$counter = 0;
foreach($applications as $application) {
    echo sprintf(
         '<div class="col-md-4">'
             . '<h4 class="list-group-item-heading remove-margin">'
             . '<i class="fa fa-plus fa-fw" data-myattr="%s"> </i>'
             . '</h4>'
             . '</div>',
         $counter++
    );
}

And then you could attach your click event subscriber with:

$(document)
        .ready(function () {
            $("i[data-myattr]")
                .click(function () {
                    counter = 0;
                    id = $(this).data("myattr");
                    $(this).css("color", "green");
                    $("#votes-count").parent().html(++counter);
                    alert(id);
                }
            );
        }
);

That should work. Good luck!