how to add and remove select box with options and text box with label and style using javascript
<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;something&lt;/title&gt;
    &lt;link rel="stylesheet" href="../../style/global.css"&gt;
        &lt;link rel="stylesheet" href="../../style/local.css"&gt;
        &lt;link rel="stylesheet" href="../../calendarControl.css"&gt;
        &lt;script Language="JavaScript" src="../jscripts/util.js"&gt;&lt;/script&gt;
    &lt;script language="JavaScript" src="../../calendarControl_modi.js"&gt;&lt;/script&gt;
    &lt;style&gt;
    input.normal
    {
    text-transform:uppercase;
    }
    &lt;/style&gt;
    &lt;script&gt;

    function addBox()
    {   
        //y;
        y=2;
        alert(y);
        var form=document.frm;

        var _items = [ 'NA', 'Storage Device', 'Imaging Device'];

        var label, textbox,lable2,select,div;

        label = document.createElement('label');

        label.appendChild(document.createTextNode('Belonging Type '+y+ ':'));

        select = document.createElement('select');

            for ( var x = 0; x &lt; _items.length; x++ ) 
            {
             _option = document.createElement('option');
             var _text = document.createTextNode(_items[x]);
             _option.appendChild(_text);
             select.appendChild(_option); 
             _option.value = _items[x];
            }

        label2 = document.createElement('label');

        label2.appendChild(document.createTextNode('Belonging '+y+ ':'));

        textbox = document.createElement('input');
        textbox.type = 'text';

        label.appendChild(select);
        label.appendChild(label2);
        label.appendChild(textbox);

        div=document.createElement('div');
        div.appendChild(label);
        document.getElementById('frm').appendChild(div);

        y=y+1;
        alert(y);


        }

        function removeBox() 
        {
        var form = document.frm;
        if (form.lastChild.nodeName.toLowerCase() == 'div')
        form.removeChild(form.lastChild);

        }

        function incrementCount() 
        {
        document.frm.count.value = parseInt(document.frm.count.value) + 1;
        addBox();
        }

        function decCount() 
        {
        document.frm.count.value = parseInt(document.frm.count.value) - 1;
        removeBox();
        }

    &lt;/script&gt;

&lt;/head&gt;

&lt;body leftmargin="2" topmargin="2" marginwidth="2" marginheight="0" onload=""&gt;
&lt;table border = "0" cellspacing="0" cellpadding="0" width = "100%"&gt;
            &lt;tr&gt;
                &lt;td class = "normal" align = "left" colspan = "100%" &gt;
                    &lt;!-- Put the Header Image over here--&gt;
                &lt;!--&lt;img src="../../images/ts.gif" width="10%" &gt;--&gt;
                &lt;td&gt;
            &lt;/tr&gt;
    &lt;/table&gt;
    &lt;!--&lt;img src="../../images/line.bmp" width="100%" height="2"&gt;--&gt;

    &lt;form name  = "frm" method = "post" action="" &gt;
    &lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;td&gt;&lt;input type="hidden" name="count" value="0" readonly &gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;a href="javascript:incrementCount();" onclick="" class="underline_small"&gt;Add more&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;a class="underline_small" href="javascript:decCount();" onclick=""&gt;Remove&lt;a&gt;&lt;/td&gt;
    &lt;/tr&gt;

&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The output I am getting is as follows</p>

<p><img src="http://i.stack.imgur.com/xONS9.png" alt="enter image description here"></p>

<p>after clicking on remove I am able to remove added element but when I press again Add more value of y remains same which I want to increment next time when I will click Add more it should show Belonging Type 3 and how can we apply style to dynamically added element as I applied to hyperlink  Addmore and remove.</p>
