How to reorder elements by name and id after removing dynamic element with jquery?

Question

I have dynamic element and field on the form.

JS :

<script>
function hapus(i){
    $("#field"+i).remove();
}
</script>

HTML :

<div class="fieldwrapper" id="field1">
       <select class="fieldtype" id="labensmittel1" name="data[Tagebuch][labensmitell1]" style="width:160px;">
            <option value="data">data</option>
       </select>
       <input type="text" value="" id="qty1" name="data[Tagebuch][qty1]" class="fieldname" />
       <input type="text" value="" id="labendata1" name="data[Tagebuch][labendata1]" class="fieldname" />
       <input type="button" class="hapus1" value="-" style="width:20px;" id="hapus1" onclick="hapus(1);" />
</div>
<div class="fieldwrapper" id="field2">
       <select class="fieldtype" id="labensmittel2" name="data[Tagebuch][labensmitell2]" style="width:160px;">
            <option value="data">data</option>
       </select>
       <input type="text" value="" id="qty2" name="data[Tagebuch][qty2]" class="fieldname" />
       <input type="text" value="" id="labendata2" name="data[Tagebuch][labendata2]" class="fieldname" />
       <input type="button" class="hapus2" value="-" style="width:20px;" id="hapus2" onclick="hapus(1);" />
</div>
<div class="fieldwrapper" id="field3">
       <select class="fieldtype" id="labensmittel3" name="data[Tagebuch][labensmitell3]" style="width:160px;">
            <option value="data">data</option>
       </select>
       <input type="text" value="" id="qty3" name="data[Tagebuch][qty3]" class="fieldname" />
       <input type="text" value="" id="labendata3" name="data[Tagebuch][labendata3]" class="fieldname" />
       <input type="button" class="hapus3" value="-" style="width:20px;" id="hapus3" onclick="hapus(3);" />
</div>

How can I reorder the fields by name? For example if I remove field2 div id='field3' will be changed into div id='field2' then the select and input field id and name from id="labensmittel3" and name="data[Tagebuch][labensmitell3]" will be moved to id="labensmittel2" and name="data[Tagebuch][labensmitell2]"

Thanks

Answer 1

How about a basic iteration after the delete happens that resets all of your ids:

var fields = $('.fieldwrapper');
var count = 1;
$.each(fields, function() {
    $(this).attr('id','field' + count);
    count++;
});