Assuming you have the ID of the button and the input, you can do the following:

const button = document.querySelector("#button")
const input = document.querySelector("#input");

button.addEventListener("click", () => input.style.display = "block");

Please note that the input should be with a display: none; CSS property first.

As I could see input fields are not hidden, so may want to hide them first. Example style="display:none". Then in your onclick add something like the following:

$("#buttonid").on("click", function(){
 $("#inputid").show();

In html you need to have an <input> and <button>.

<input type="text" name="info" id="info" class="">
<button id="showInfo">Show Input</button>

In css add class .active and set on input display: none.

input {
   display: none;
}

.active {
   display: block;
}

First set is download from DOM <input> and <div>. The second step is add event listener for click event on the <button>.

const input = document.querySelector('input#info');
const showInput = document.querySelector('button#showInfo');

showInput.addEventListener('click', () => {
   input.classList.toggle('active')
})