jQuery .clone() and Microsoft Explorer (bug?)

Question

I am having some issues with Microsoft Explorer 6/7 and the jQuery "clone" function. The jQuery that I am using is:

$(function() {
    $('#addFields').click(function() {
        var newCredit = $('#original').clone(); // create new set
        newCredit.find('input').val(''); // empty input fields
        $(this).before(newCredit); // append at the end
        return false;
    });
});

The html form looks like this:

<div id="original">

    <li id="prodEnt" >
     <label class="description" for="entity[]">Entity </label>
     <div>
      <input name="entity[]" class="element text medium" type="text" value="" /> 
     </div> 
    </li>  

    <li id="entFunc" >

    <label class="description" for="element_5">Function </label>
    <div>
     <input name="function[]" class="element text medium" type="text" value="" /> 
    </div> 
    </li>

    <li class="section_break_small"></li>
</div>

The Microsoft browser is unable to replicate more than one clone, and does not style (css) the new elements.

Please advise me to a IE friendly alternative! Thanks.

Answer 1

You can't/shouldn't have <li> elements without a parent <ul>. Furthermore, you can't/shouldn't have <div> elements inside the <li> like you have. Finally, you have id attributes in the HTML that is being cloned, and this will result in duplicate elements with the same id. If you replace the outer original div and make it a <ul>, get rid of the id attributes and make it a class instead, it should be fine.

All that being said, it does work for me on IE7.

EDIT

In response to your comment:

To only select the first one, do this (assuming it has a class of fields):

$('ul.fields').eq(0).clone();