CodingForums.com - jQuery 'hiding' content on search output page

Hello I was wondering if you may be able to help with this problem.

I have a PHP search results output page. In the search results I want to have a copy button next to some of the results so users can easily copy them to their clipboard.

The jQuery I'm using only works when I output the following script along with the results (i.e. it won't work if I just have it on the page statically).

Code:

$('.copy').click(function() {

    

    var row = $(this).closest('td');



    

    var txt = row.find('span:first');



    

    window.clipboardData.setData('Text', txt.text());



    

    var range = document.body.createTextRange();

    range.moveToElementText(txt[0]);

    range.select();

});



the HTML...



<td><span>Name from DB here</span> <button class="copy">COPY</button></td>



<td><span>Phonefrom DB here</span> <button class="copy">COPY</button></td>



<td><span>Email from DB here</span> <button class="copy">COPY</button></td>

So yes it works if I do it that way, but everything above the script gets hidden (behaves like the elements have display: none set). I have a form above the script that needs to be on the page.

Please help!!!