Clone content w/javascript from elements with same class

I have very little JavaScript knowledge and have been tasked with duplicating an H2 and a P from a DIV into another DIV that shows on a hover. Please take a look at what I’m trying to do here: http://dev.surgeryatnmc.org/surgical-services/.

I’m trying to clone from .orig to .hover, and it’s sort of working but showing all three live items in each tooltip instead of individually.

Here are my list items:

<ul>
    <li class="lactrimal1">
                <div class="orig">
                    <h2>Lactrimal Duct Probe</h2>
                    <p>Helps patient regain use of their tear ducts in this quick procedure.</p>
                </div>
                <div class="img">
                    <div class="txt hover"></div>
                </div>
            </li>
            <li class="cataracts2">
                <div class="orig">
                    <h2>Cataracts</h2>
                    <p>We replace the eye's natural lens which has become clouded by cataract with an artificial lens.</p>
                </div>
                <div class="img">
                    <div class="txt hover"></div>
                </div>
            </li>
            <li class="sinus3">
                <div class="orig">
                    <h2>Endoscopic Sinus Surgery</h2>
                    <p>A procedure used to remove blockages in the sinuses to allow for efficient pain-free breathing.</p>
                </div>
                <div class="img">
                    <div class="txt hover"></div>
                </div>
            </li>
</ul>

Here’s my script:

$  ('div.orig', this).each(function() {
    $  (this).clone().appendTo('div.hover');
});

I’ve also tried this but it only clones the first item:

$  (".hover").html($  ('.orig').html());

Any help is appreciated, thanks everyone!

newest questions tagged jquery – Stack Overflow