jquery each or custom checkbox question
<p>I have a problem on the result and i'm already tired of solving.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;input type="checkbox" class="check" checked="checked" /&gt;
&lt;input type="checkbox" class="check" /&gt;
</code></pre>

<p><br />
<strong>JQUERY</strong></p>

<pre><code>$.fn.op_checkbox = function() {
    $(this).hide();
    $(this).wrap('&lt;div class="op_checkbox"&gt;&lt;/div&gt;');
    $(this).parent().append('&lt;div class="op_check_on_off"&gt;&amp;nbsp;&lt;/div&gt;');
    if($(this).is(':checked')) {
        $('.op_check_on_off').addClass('op_check_on');
    }
    else {
        $('.op_check_on_off').addClass('op_check_off');
    }
}
$(document).ready(function() {
    $('.check').op_checkbox();
});
</code></pre>

<p><br />
Result</p>

<pre><code>&lt;div class="op_checkbox"&gt;
    &lt;input class="check" type="checkbox" checked="checked" style="display: none;"&gt;
    &lt;div class="op_check_on_off op_check_on"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="op_checkbox"&gt;
    &lt;input class="check" type="checkbox" style="display: none;"&gt;
    &lt;div class="op_check_on_off op_check_on"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The result of first checkbox is copied in 2nd checkbox, the result should be:</p>

<pre><code>&lt;div class="op_checkbox"&gt;
    &lt;input class="check" type="checkbox" checked="checked" style="display: none;"&gt;
    &lt;div class="op_check_on_off op_check_on"&gt;&amp;nbsp;&lt;/div&gt; &lt;!-- on here --&gt;
&lt;/div&gt;
&lt;div class="op_checkbox"&gt;
    &lt;input class="check" type="checkbox" style="display: none;"&gt;
    &lt;div class="op_check_on_off op_check_off"&gt;&amp;nbsp;&lt;/div&gt; &lt;!-- off here --&gt;
&lt;/div&gt;
</code></pre>

<p>What is the reason and problem of this? Thanks for your help</p>
