Dynamically adding elements to a div aren't included in $.each call

I have a div on my page where the contents are messages. The messages are auto loaded when the page loads via javascript. Each message has the basic structure:

<div class="conversationMessage"></div>

Then there is a button, which when clicked will loop through all messages and hide/show the messages if they have a specific id:

           $("tr[id|='mstrTopic']").click(function(){
                var clicks = $(this).data('clicks');

                if(clicks)
                {
                    var splitText = $(this).attr('id').split('-');
                    $('.conversationMessage').each(function(index, value){
                        if($(value).find('.topicFlipFront').attr('rel') == splitText[1])
                            $(value).show();
                    });
                }
                else
                {
                    var splitText = $(this).attr('id').split('-');
                    $('.conversationMessage').each(function(index, value){
                        if($(value).find('.topicFlipFront').attr('rel') == splitText[1])
                            $(value).hide();
                    });
                }
                $(this).data("clicks", !clicks);
            });

The issue I'm having is that after all the javascript has loaded and the messages are auto loaded, if any additional messages are added, they won't be hidden or shown when the button is clicked.

The code below sits in the document ready function. I've also tried putting it into the code which adds new messages, however when 2 more more messages are added, it stops working. Can anyone point out where I'm going wrong and how I can make this work?