Сделать функцию, принимающую input, находящую соответствующий input'у span и обновляющую его содержимое:
const updateValue = input =>
input.previousElementSibling.querySelector('.p_value').innerText = input.value;
У input'ов вырезать инлайновые обработчики, добавить общий класс, например:
class="xxx".
Дальше можно повесить делегированный обработчик, внутри которого проверять наличие этого класса:
document.addEventListener('input', ({ target: t }) => {
if (t.classList.contains('xxx')) {
updateValue(t);
}
});
Или назначить обработчик каждому input'у индивидуально:
document.querySelectorAll('.xxx').forEach(function(n) {
n.addEventListener('input', this);
}, e => updateValue(e.target));
