Show Hide Dynamically generated text boxes with onchange of a dynamically created select field

Question

I'm wanting to dynamically generate a table like the following using MySQL, PHP, JS and HTML:

___________________________________________
[] |   Please Select Service  |  Text Box |
-------------------------------------------
    Add Row         Delete Row

So the first column is a checkbox used for row deletion. The second column is a Select box dynamically populated from a database The third column by default is hidden, and shown when "Other" is selected and hidden when "Other" is not selected. Therefore when "Add Row" is pressed it will look like the following:

___________________________________________
[] |   Please Select Service  |  Text Box |
-------------------------------------------
___________________________________________
[] |   Please Select Service  |  Text Box |
-------------------------------------------
    Add Row         Delete Row

My problem is I can only hide/show the very first text box unless the first text box is already shown when "Add Row" is pressed, if that occurs the new text box will show but can't be hidden, the "Add Row" and "Delete Row" buttons function as their names state. I'm guessing it has something to do with the value associated to the last option element in the select field.

Code Snippets can be seen below for the addRow, deleteRow and hide/show functions, as well as a the HTML that I'm using to display it.

JS

var boxCount = 1;
    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            var theSelect = document.getElementById('services');
            var lastValue = theSelect.options[theSelect.options.length - 1].value;

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        newcell.childNodes[0].id = "otherService" + boxCount;
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        newcell.childNodes[0].options[lastValue].value = boxCount;
                        break;
            }
        }
    }
    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

    function hideShowOtherBox(e) {
        var theSelect = document.getElementById('services');
        var lastValue = theSelect.options[theSelect.options.length - 1].value;
        var ele = 'otherService' + lastValue;

        if (e.options[e.selectedIndex].text == "Other") {
            if (document.getElementById(ele).style.display == "none") {
                document.getElementById(ele).style.display = "block";
            }
        } else {
            document.getElementById(ele).style.display = "none";
        }
    }

HTML

<table id="dataTable" width="350px" border="1">
    <tr>
        <td><input type="checkbox" name="chk[]"/></td>
        <td>
            <select id='services' name="services[]" onChange='hideShowOtherBox(this);'>
                <option value="Select">Please Select</option>
                <?php
                    $servicesList = getAllServices();
                    foreach($servicesList as $x) {
                        echo "<option value='$x'>$x</option>\n";
                    }
                ?>
                <option value='0'>Other</option>
            </select>
        </td>
        <td><input id='otherService0' style='display:none;' type="text" name="otherService[]"/></td>
    </tr>
</table>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

Answer 1

Try this:

var boxCount = 1;

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
}