Trying to get input.className to work

I have a table that uses addRow() function. The className I'm trying to use is bootstrap v2.0 'input-small' but nothing shows when I add a row. I can input but I don't see the glowing border or anything for that matter. Also on the last cell I have a select dropdown menu that uses foreach function. When I add a row the dropdown menu is empty. How can I fix these two items?

Thanks

<script>
        function addRow() {
          var tbl = document.getElementById('addbeds');
          var lastRow = tbl.rows.length;
          var row = tbl.insertRow(lastRow);
          
          var cell1 = row.insertCell(0);
          var input = document.createElement('input');
          input.name = 'bedroom' + lastRow;
          input.className = 'input-small';
          input.id = 'bedroom' + lastRow;
          cell1.appendChild(input);
          
          var cell2 = row.insertCell(1);
          input = document.createElement('input');
          input.name = 'comment' + lastRow;
          input.className = 'input-medium';
          input.id = 'comment' + lastRow;
          cell2.appendChild(input);
		  
	  var cell3 = row.insertCell(2);
          input = document.createElement('select');
          input.name = 'bedsize' + lastRow;
	  input.className = 'input-medium' + lastRow;
          input.id = 'bedsize' + lastRow;
          cell3.appendChild(input);
        }
        
        function delRow() {
          var tbl = document.getElementById('addbeds');
          var lastRow = tbl.rows.length;
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
        }
    </script>

Select allOpen in new window

<table class="table" id="addbeds">
   <tbody>
     <tr>
       <td>
         <p align="center">Bedroom</p></td>
       <td>
         <p align="center">Comment</p></td>
       <td></td>
    </tr>
     <tr>
       <td>
        <input type='text' id='bedroom' name='bedroom' title='Please give this bedroom a name. ie Bedroom 1' maxlength='65,535' placeholder="Name this bedroom" class='input-small' value='<?php echo (isset($data['bedroom'])) ? $data['bedroom'] : '' ?>' data-toggle="tooltip" data-placement="right" /> </td>
       <td>
        <input type='text' id='comment' name='comment' title='Comment on this bedroom' maxlength='65,535' placeholder="What to find on this room." class='input-medium' value='<?php echo (isset($data['comment'])) ? $data['comment'] : '' ?>' data-toggle="tooltip" data-placement="right" /></td>
        <td>
          <select name="bedsize" title="bedsize" class="input-medium">
            <?php foreach($bedsize as $key => $value): ?>
            <option value="<?php echo $key ?>"<?php echo (isset($data['bedsize']) && $data['bedsize'] == $key) ? ' selected="selected"' : null ;?>><?php echo $value ?></option>
            <?php endforeach ?>
          </select></td>
    </tr>
  </tbody>
</table>
<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse">
     <tr>
       <td>
       <p align="center">
          <input type="button" value="Add Row" onclick="addRow()" />
          <input type="button" value="Subtract Row" onclick="delRow()" />
       </p>
       </td>
    </tr>
</table>

Select allOpen in new window