<html> <head> <title>something</title> <link rel=stylesheet href=../../style/global.css> <link rel=stylesheet href=../../style/local.css> <link rel=stylesheet href=../../calendarControl.css> <script Language=JavaScript

Question

0

Asked: June 9, 20262026-06-09T19:27:51+00:00 2026-06-09T19:27:51+00:00

<html> <head> <title>something</title> <link rel=stylesheet href=../../style/global.css> <link rel=stylesheet href=../../style/local.css> <link rel=stylesheet href=../../calendarControl.css> <script Language=JavaScript

0

<html>
<head>
    <title>something</title>
    <link rel="stylesheet" href="../../style/global.css">
        <link rel="stylesheet" href="../../style/local.css">
        <link rel="stylesheet" href="../../calendarControl.css">
        <script Language="JavaScript" src="../jscripts/util.js"></script>
    <script language="JavaScript" src="../../calendarControl_modi.js"></script>
    <style>
    input.normal
    {
    text-transform:uppercase;
    }
    </style>
    <script>

    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 < _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();
        }

    </script>

</head>

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

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

</table>
</form>
</body>
</html>

The output I am getting is as follows

enter image description here

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.