jquery标识附加的，克隆的元素

In my HTML file 2 href 1st for add blank copy of div 2nd for add a new copy of the same div with values. for each new copy or new blank should inserted below the selected div.

html code

<div class="item">
    <div class="form-group">
        <a href="#" id="addnl">
            <span class="badge-a">+</span>
        </a>
        <!--add new blank line-->
        <a href="#" id="addcp">
            <span class="badge-b">++</span>
        </a>
        <!--add new  line  with same values  above-->
        <label for="qty">qty </label>
        <input class='form-control' id='qty' name='qty' type='number' required>
            <label for="selgroup">group </label>
            <select class="form-control" id="selgroup">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            <label for="model">somthing </label>
            <input class='form-control' id='somthing ' name='somthing ' type='number'required>
                <label for="sellevel">somthing </label>
                <select class="form-control" id="sellevel">
                    <option>1</option>
                    <option>2</option>
                    <label for="selctime">somthing </label>
                    <select class="form-control" id="selctime">
                        <option>1</option>
                        <option>2</option>
                    </select>

js code

var request = $('.item:first').append();
$('.badge-a').click(function() {
 request.clone().insertAfter($('.item:last'));
 $(window).trigger('resize');
});

My problems is :-

1. for copying values every thing gets copied but not the select options stays as defaults.
2. for locations all I have Just :first and add to :last, all other options suggested by the IDE not works like " :selected " even not supported by jquery.
3. href in the new inserted DIV not works too

Here is fiddle.

Thanks in advance.