Repeating code block problem
<p>I have the following code in a jQuery JavaScript document running on a page (<b>THIS IS CURRENT</b>):</p>

<pre><code>$(window).resize(function(){
    detectscreen();
});

function windowWidth() {
    if(!window.innerWidth) {
     // user is being a git, using ie
     return document.documentElement.clientWidth;
    } else {
     return window.innerWidth;
}}

gearsExists = false;

function detectscreen() {
    shouldExist = windowWidth() &gt;= 1300;
    if (shouldExist != gearsExists) {
     if (shouldExist) {
       $('body').append('&lt;div id="gearsfloat"&gt;&lt;a href="#" id="clickGoTop"&gt;&lt;/a&gt;&lt;/div&gt;');
       $('#clickGoTop').fadeTo(0,0);
       $('#clickGoTop').hover(function() {
        $(this).stop().fadeTo(500,1);
       }, function() {
        $(this).stop().fadeTo(500,0);
       });
     } else {
      $('#gearsfloat').remove();
      $('#clickGoTop').remove();
     }
     gearsExists = shouldExist;
    }
}
</code></pre>

<p>This code is from my <a href="http://stackoverflow.com/questions/1088218/resize-script-appends-object-does-it-over-and-over-again/">previous question</a>, branched here simply because I think it is related.</p>

<p>The problem here is that the beginning is fine: it is displayed. However, if the screen is resized to less than 1300, it disappears; still good.</p>

<p>Now I make the window again larger than 1300. Suddenly the gear element is doubled. Another screen squish and largen and BAM, there's three now. Do this several times and it quickly adds up.</p>

<p>How can I stop this? </p>
