multi cloned select menu to submit form using Jquery?
<p>im trying to make a simple form which have a select menu with clone and remove button and once any of those select menus changed it must post the form using .Ajax call .
its working but have some issues
HTML</p>

<pre><code>&lt;form action="action.php" method="post" id="LangForm" &gt;
&lt;div id="fileds"&gt;
&lt;select name="lang[]" id="lang" class="lang"&gt;
&lt;option value=""&gt;Select&lt;/option&gt;
&lt;option value="arabic"&gt;Arabic&lt;/option&gt;
&lt;option value="english"&gt;english&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;button class="clone"&gt;Clone&lt;/button&gt; 
&lt;button class="remove"&gt;Remove&lt;/button&gt;
&lt;div id="content"&gt;&lt;/div&gt;
</code></pre>

<p>JS</p>

<pre><code>$(function(){
     var counter = 1;
    $(".clone").click(function(){
        $('#lang').clone().appendTo('#fileds');
        counter++ ;
    });
    $(".remove").click(function(){
        if (counter &gt; 1) {
        $('#lang:last').remove();
        counter-- ;
        }       
    });
    $('.lang').change(function(){ 
    $.ajax({type:'POST', 
        url: 'action.php', 
        data:$('#LangForm').serialize(), 
        success: function(response) {
        $('#content').html(response);
    }
    });
    });
});
</code></pre>

<p>it have 2 issues
first one when i click the remove button it remove the original select menu first then the cloned one and keep the last cloned one what i need is to remove the cloned menus first and keep the original one</p>

<p>second issue its submit form only when original menu changed what i need is to submit form whenever any menu changed original or cloned.
below is the PHP code from the action PHP page its something simple just to show result
PHP</p>

<pre><code>&lt;?php
print_r ($_POST['lang']);
?&gt;
</code></pre>

<p>Thanks</p>
