jquery - DOM で一致するすべての要素のインデックスに関する問題

Question

これはこの問題と重複している可能性があることを理解しています

同じクラスの要素の現在のインデックスを選択しようとしています。

これが私の問題の例です。 http://jsfiddle.net/jMB45/2/

他の質問の提案に従いましたが、2 番目の要素セットでまだ「-1」を受け取っています。

HTML

<div class="members">
    <div class="row">
        <div class="col-sm-3 ">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>                                          
    </div>
</div>
<div class="profiles">
    <div class="profile active">
        <div class="row">
            <div class="bio col-md-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor et sapien non vestibulum. Ut dictum arcu libero, eu aliquet massa bibendum id. Sed a venenatis nisl, id pretium purus. Phasellus porta faucibus arcu in pellentesque. Maecenas viverra, lectus quis euismod cursus, elit magna blandit augue, nec tincidunt lectus orci sed nunc. Suspendisse est justo, ullamcorper in leo sed, facilisis varius tellus. 
                </p>
            </div>
            <div class="photo col-md-6">
            </div>
        </div>
    </div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
</div>
<div class="members">
    <div class="row">
        <div class="col-sm-3 ">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>                                          
    </div>
</div>

jQuery

$(document).ready(function(){
    $('.member').click(function() {

        $('.member').removeClass('active');
        $(this).addClass('active');

        var members = $('.member');

        var current = members.index($('.active'))
        $('#index').html(current);

    });
});