Input boxes visible and works only on selecting a dropdown option

Question

I created two input boxes to store some value. I have alotted a value for each inputs such that on entering those values only i should get the current button changed to a different one. Now I have two questions here-

1. On implementing this , I am not able to see the by default button which should be present here, instead I see the changed button which i wanted that too only when I enter the values i alotted in the input boxes. How can i fix this such that if i dont enter anything or enter wrong values in input boxes my default button should still be visible.

2. I want these two input boxes under a particular option lets say "XYZ" . This means when i choose "XYZ" then only these boxes should appear and work after providing values. I am trying to use a dropdown here but not able to get the input boxes after clicking the dropdown option. They are side b y side the dropdown.

I am attaching some code to explain, cant attach whole code because of company policies.

XYZ:
<select id="xyz" name="xyz" onchange="renderxyzButton()">
  <option Selected Disabled>Select</option>
  <option value="XYZ">XYZ</option>

</select>

X:
<input type="text" size="50" id="x" name="x" /> 
Y:
<input type="text" size="50" id="y" name="y" />




document.querySelector("#xyz").addEventListener('change', function(e) {
  e.somefunc();
  if ($("#xyz").val() === "XYZ") {
    renderxyzButton();
  } else {
    renderButton();
  }
});

function renderxyzButton() {
  if ($("#x").val() === "P") {
    document.querySelector("#x").addEventListener('input', function(e) {
      e.somefunc();
      renderButton();
    });
  } else {
    renderButton();
  }
  if ($("#y").val() === "C") {
    document.querySelector("#y").addEventListener('input', function(e) {
      e.somefunc();

      renderButton();
    });
  } else {
    renderButton();
  }
}