Remove and append elements on jQuery change function

We are using following code to append more input element on text change:

$(document).ready(function() {
$('#instal').change(function() {
    var instalval = parseInt($(this).val());
    if(instalval != '') {
    for( i = 0; i < instalval; i++) {
        $('#fields').append(' <li class="inputs clearfix"><input type="text" class="small" size="30" name="date" placeholder="Date" /> <input type="text" class="small" size="30" name="开发者_Go百科amount" placeholder="Amount" /> <span title="Remove this" class="ui-icon ui-icon-closethick closefield"></span> </li>');
    }
    }  
});
$('.closefield').live('click', function() {
$(this).parent().remove();
});
});

We are using html5 input type="number" for value but so it adds 6 elements if we selects 6 and after that if we selects 12 it adds 12 to last added 6 elements so totals elements would be 18 not 12 (on selection of 12), so how can we fix our code to achieve this, and what if we select 6 again after selecting 12, i hope this makes sense. thanks.

Even if you could help how can we post it to mysql using php?

You could put an if statement in the beginning of the callback that checks if the #fields element's children have the class inputs. If it does, then remove them.

$(document).ready(function() {
$('#instal').change(function() {
    if($('#fields').children().hasClass('inputs')) {
        $('.inputs').remove();
    }
    var instalval = parseInt($(this).val());
    if(instalval != '') {
        for( i = 0; i < instalval; i++) {
            $('#fields').append(' <li class="inputs clearfix"><input type="text" class="small" size="30" name="date" placeholder="Date" /> <input type="text" class="small" size="30" name="amount" placeholder="Amount" /> <span title="Remove this" class="ui-icon ui-icon-closethick closefield"></span> </li>');
            $(function() {
                 $( ".small" ).datepicker({ minDate: "+" + i.toString() + "M" });
            });
        }
    }  
});

$('.closefield').live('click', function() {
    $(this).parent().remove();
 });

This is for the jQuery UI datepicker:

$(function() {
    $( ".date" ).datepicker();
});

This is for fixing the range of dates:

$(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});