Loop select list menu to create search filter

Question

I know I am asking pretty long question but I really in a need of this solution.

I need to create a looping search select boxes for search filter option. For example,

• Initially there will be a select menu with 5 list items when I select the name from the list then I should enter the specific data in the text box next to that. (As shown in the Image 1)
• Now I need to add another row of select menu. By clicking on the + button next to that I should be able to add another row, when the another select menu is added then the + button of first row should turn to close(X) button
• When the new row is generated, the select menu should vomit the previously selected item means it should contain only 4 items in that now. And bith the + and X buttons.
• Same case repeats till the items in the select menu gets over.

After that I need to add another select menu to enter another set of data, in this case the previously selected item should not be present in the looped select menu

Here is the basic code updated

Image 1

Image 2

Note: In my fiddle plese refre the first action when you click on the + button, I need the same effect when the looped row's button click and as soon as I click on the first + button it should turn to close button.

Answer 1

LIVE DEMO

HTML:

<div class="filtr">

     <!-- we'll clone this one... -->   
    <div class="loop"> 
        <select>
            <option>By Name</option>
            <option>By ID</option>
            <option>By Place</option>
            <option>By Post</option>
            <option>By Tag</option>
        </select>
        <input type="text" />
        <button class="btn del">X</button>
        <button class="btn add">+</button>
    </div>
    <!-- here ...-->

</div>

CSS (IE9+):

.filtr{
    width:350px;
}
.loop {
    background:#ccc;
    display:inline-block;
}
.loop .add{
    display:none;
}
.loop:only-of-type .del{
    display:none;
}
.loop:only-of-type .add{
    display:inline;
}
.loop:last-of-type:not(:only-of-type) .add{
    display:inline;
}

jQuery:

$filtr = $('.filtr');

$filtr.on('click', '.add', function(){
   $(this).closest('.loop').clone().appendTo( $filtr );
});

$filtr.on('click', '.del', function(){
   $(this).closest('.loop').remove();
});