How to clean up this jQuery hover+wrap function
<p>Here's my function:</p>

<pre><code>var add_cloud_zoom_wrapper = function() {
  $('#main-image').hover(function() {
    $('#main-image').wrap(function() {
      return '&lt;a href=' + $(this).attr('src').replace(/\bproduct\b/, 'original') + ' class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, position: \'inside\'"&gt;';
    });
  });
}
</code></pre>

<p>The .wrap() alone works. I need this to work however, whenever the image is hovered over because I have another event where the image changes, so I'll need a new anchor tag to hover the newly embedded image each time. The other part of this is I need to remove the anchor tag with id="zoom1" before I wrap, otherwise we'll have additional/broken markup. What's the best way to clean this up?</p>

<p>My HTML is straight forward:</p>

<pre><code>&lt;img alt="foo" id="main-image" src="/assets/products/1051/product/Perspective_View-0.jpeg?1290039436" /&gt;
</code></pre>
