Buttons not aligned after another button is clicked

[TheLazyPig]

Hi!

I have 3 buttons visible


If I click Add button only Add button should be visible.


Then If I click back the Add button it will display all


But after I click it back the other button is not aligned.

function addBank(polno){
 
    var editbtn = document.getElementById("btnEdit");
    var selectbtn = document.getElementById("btnSelect");

    if (document.getElementById("addNewRow").style.display=='none') {
    document.getElementById("addNewRow").style.display = 'table-row'; // set to table-row instead of an empty string

    selectbtn.style.display = "none"; // Hide button
    editbtn.style.display = "none"; // Hide button
    }
    else {
    document.getElementById("addNewRow").style.display = 'none';

    selectbtn.style.display = "block"; // Show button
    editbtn.style.display = "block"; // Show button
    }
}

<a href="javascript:selectBank()" id="btnSelect" title="Select"><img src = "images/SelectBank.png" id="ImgSelect" width="191" height="38" align="right" ></a>&nbsp;&nbsp;&nbsp;
<a href="javascript:updateBank()" id="btnSave" title="Save" style="display:none;"><img src = "images/SaveBank.png" id="ImgSave" width="74" height="38" align="right"></a>&nbsp;&nbsp;&nbsp;
<a href="javascript:editBank()" id="btnEdit" title="Edit" disabled><img src = "images/EditBank.png" id="ImgEdit" width="69" height="38" align="right" ></a>&nbsp;&nbsp;&nbsp;
<a href="javascript:addBank('$!polno')" id="btnAdd" title="New"><img src = "images/AddBank.png" width="69" height="38" align="right" ></a>

What could be the reason why it is not aligned?

Thank you for the replies!