Interferance when pairing with DOMs [duplicate]

HTML:

<h1 id="ws-title"></h1>
<time datetime="" id="ws-date"></time>

JS:

inp1 = document.querySelector("input[name='ws-date']");
out1 = document.querySelector("#ws-date");
inp1.addEventListener("input", e => {
        out1.textContent=e.target.value;
});

inp2 = document.querySelector("input[name='ws-title']");
out2 = document.querySelector("#ws-title");
inp2.addEventListener("input", e => {
        out2.textContent=e.target.value;
});

Works as expected (i.e: changing input changes corresponsing h2).

However:

function pairListen(name) {
    inp = document.querySelector(`input[name='${name}']`);
    out = document.querySelector(`#${name}`);
    inp.addEventListener("input", e => {
            out.textContent=e.target.value;
    });
}
pairListen("ws-title");
pairListen("ws-date");

Causes <h2 id="ws-date"> to be changed when <input name="ws-title"> is changed and vice versa.

Why is that? All difference is that repeated code is embedded in a function.