jquery - jQueryイベントのクリックが複数回発生

Question

「add_more」ボタンがクリックされたときに、div を次々に表示しようとしています。最初のクリックは思い通りに機能しますが、2 回目のクリックですべての div が表示されます。

$(document).ready(function() {
        $('#add_more').click(function() {
            $('#add_more_fields').show(500);
        });
    });

    $('#add_more').click(function() {
        if($('#add_more_fields').is(':visible')) {
            $('#add_more_fields2').show(500);
        };
    });

    $('#add_more').click(function() {
        if($('#add_more_fields2').is(':visible')) {
            $('#add_more_fields3').show(500);
        };
    });

    $('#add_more').click(function() {
        if($('#add_more_fields3').is(':visible')) {
            $('#add_more_fields4').show(500);
        };
    });

    $('#add_more').click(function() {
        if($('#add_more_fields4').is(':visible')) {
            $('#add_more_fields5').show(500);
        };
    });

問題は、これらすべてがワンクリック機能に関連付けられており、同時にトリガーされていることです。クリックするたびに次の div が追加されるように、イベントを分割するにはどうすればよいですか?