Why my Save button and Cancel Button doesn't show after I clicked the New Product button?

Question

I'm a beginner in javascript.

When I clicked the New Product button new Row will be added in the table(that worked out). But, Save button and Cancel button supposedly will show up(and it didn't work) and the New Product button will be hidden(still didn't work).

Here's a part of my HTML where I declared my buttons and the table.

<table id="dataTable" class="poductTable" border="1" cellspacing="2" width="75%" align="center">
        <tr>
            <td>No</td>
            <td>Name</td>
            <td>Description</td>
            <td>Unit</td>
            <td>Qty</td>
        </tr>
        <tr>
            <td>1</td>
            <td><input type="text"></td>
            <td><input type="text"></td>
            <td><input type="text"></td>
            <td><input type="text"></td>
        </tr>
    </table>


    <table align="center" id="productActions">
        <tr>
            <td><button type="button" onclick="saveProd()" id="saveProd" style="display:none;">Save</button></td>
            <td><button type="button" onclick="cancelProd()" id="cancelProd" style="display:none;">Cancel</button></td>
            <td><button type="button" onclick="addRow('dataTable')" id="newProd">New Product</button></td>
            <td><button type="button" onclick="editProduct()" id="editProd">Edit Product</button></td>
            <td><button type="button" onclick="delProduct()" id="delProd">Delete Product</button></td>

        </tr>
    </table>

Here is the part of my script.

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

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

    var cell1 = row.insertCell(0);
    cell1.innerHTML = rowCount + 0;

    var cell2 = row.insertCell(1);
    var element1 = document.createElement("input");
    element1.type = "text";
    element1.name = "newProdName[]";
    cell2.appendChild(element1);

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "newProdDesc[]";
    cell3.appendChild(element2);

    var cell4 = row.insertCell(3);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "newProdUnit[]";
    cell4.appendChild(element3);

    var cell5 = row.insertCell(4);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "newProdQty[]";
    cell5.appendChild(element4);
}

$(document).ready(function () {
        $('#newProd').click(function () {
            $(this).hide();
            $('#saveProd').show();
            $('#cancelProd').show();
        });
});

Thank you for helping in advance.

Answer 1

I've had the same issue before

Not sure if its the correct fix, but i used JavaScript to hide the elements

HTML:

<td><button type="button" onclick="saveProd()" id="saveProd">Save</button></td>
<td><button type="button" onclick="cancelProd()" id="cancelProd">Cancel</button></td>

JavaScript

$(document).ready(function () {
        $('#saveProd').hide();
        $('#cancelProd').hide();

        $('#newProd').click(function () {
            $(this).hide();
            $('#saveProd').show();
            $('#cancelProd').show();
        });
});