Javascript: Dynamic adding of text fields and select tag is not getting saved
<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script &gt;
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "&lt;input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name_"+fields+"' /&gt;"+
'&lt;select id="client_category_name_'+fields+'" name="client_category[]"&gt;&lt;option value=""&gt;Select Category&lt;/option&gt;&lt;option value="1"&gt;internal&lt;/option&gt;&lt;option value="2"&gt;external&lt;/option&gt;&lt;option value="3"&gt;others&lt;/option&gt;&lt;/select&gt;';
fields = fields+ 1;
} else {
document.getElementById('text').innerHTML += "&lt;br /&gt;More then 3 not allowed.";
document.form.add.disabled=true;
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="form"&gt;
&lt;input type="button" onclick="addInput();" name="add" value="Add More" /&gt;
&lt;/form&gt;
&lt;div id="text"&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Question: When I click on add more first and <strong>type something</strong> and click on add more again the one i entered before is removed. What is the reason behind this. And how to fix it?</p>

<p>Thanks In advance</p>
