Javascript动态添加多个表单字段

我是新的javascript和PHP。我正在创建一个表单，我需要一个选项，用户单击添加字段，然后添加一些字段。

我正在使用这个脚本:

<script type="text/javascript">
    var counter = 1;
    var limit = 3;
    function addInput(divName){
         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              var newdiv = document.createElement('div');
              newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
              document.getElementById(divName).appendChild(newdiv);
              counter++;
         }
    }
</script>

，它可以工作但是我需要在内部HTML

<label>Category <strong>*</strong></label>
<font id=catname> 
<select name='catname'>
<option value='0'>============</option>
</select></font>
<label>Item<strong>*</strong></label><font id=itemname>
<select disabled='disabled' name='itemname'>
<option value='0'></option>
</select></font>

那么我怎么放这些字段呢?

完整代码

<script type="text/javascript">
    var counter = 1;
    var limit = 3;
    function addInput(divName){
         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              var newdiv = document.createElement('div');
              newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
              document.getElementById(divName).appendChild(newdiv);
              counter++;
         }
    }
</script>
  <div class="form-style-5" style="margin-left: 360px;">
            <form name="form1" method="post" action="outgoingstocksave.php">
            <fieldset>
            <legend><span class="number">&nbsp;</span> Outgoing Stocks Entry</legend>
            <label>Ref. No.</label>
            <input type="text" readonly="readonly" name="refno" value="<?php echo $refno; ?>">
            <div id="dynamicInput">
             <label>Category <strong>*</strong></label>
                <font id=catname> 
                <select name='catname'>
                <option value='0'>============</option>
                </select></font>
                <label>Item<strong>*</strong></label><font id=itemname>
                <select disabled='disabled' name='itemname'>
                <option value='0'></option>
                </select></font>
            <input type="number" name="quantity" maxlength="10" placeholder="ITEM QUANTITY *" required>
            </div>
            <input type="text" name="date" readonly="readonly" id="datepicker" placeholder="DATE *" required>
            </fieldset>
            <input type="submit" value="Save" />
        </form>
        </div>

 <script language=Javascript>
        function Inint_AJAX() {
        try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
        try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
        try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
        alert("XMLHttpRequest not supported");
        return null;
        };
        function dochange(src, val) {
        var req = Inint_AJAX();
        req.onreadystatechange = function () {
        if (req.readyState==4) {
        if (req.status==200) {
           document.getElementById(src).innerHTML=req.responseText; //retuen value
        }
        }
        };
    req.open("GET", "itemsfill.php?data="+src+"&val="+val); //make connection
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
    req.send(null); //send value
    }
    window.onLoad=dochange('catname', -1);         // value in first dropdown
</script>