JQuery. В $singleDesignWrapper есть инпут. Нужно по onchange получать введенное значение

Question

JQuery. В $singleDesignWrapper есть инпут. Нужно по onchange получать введенное значение

в инпут и класть его в content <p class="sidebar-design-name"></p>.
Что-то на подобии как сделано в строке:
$('.sidebar-design-number', $element).text('Design ' + (i+1));

А в общем задача такова:
Есть вложенные формы дизайнов нужно из инпута который находится в ".field-name-field-design-name" на лету заполнять значения в сайдбаре.

Код:
const $singleDesignWrapper = $(
".field--name-field-design .field--name-field-design-name"
);

$singleDesignWrapper.each(function(i) {

console.log($(this));

const $element =
$('<div class="sidebar-designs-wrapper">\n' +
' <div class="sidebar-single-design-container">\n' +
' <div class="sidebar-design-number-and-name">\n' +
' <p class="sidebar-design-number"></p>\n' +
' <p class="sidebar-design-name"></p>\n' +
' </div>\n' +
' <p class="sidebar-garments-locations-count"></p>\n' +
' </div>\n' +
'</div>');

$('.sidebar-design-number', $element).text('Design ' + (i+1));
$sidebarDesignsWrapper.append($element);

});

Как это реализовать? console.log($(this)); показывает четыре объекта.

HTML выглядит так:
<div class="sidebar">
<div class="button-container current-step"></div>
<div class="sidebar-designs-wrapper">
<div class="sidebar-single-design-container">
<div class="sidebar-design-number-and-name">
<p class="sidebar-design-number"></p>
<p class="sidebar-design-name"></p>
</div>
<p class="sidebar-garments-locations-count"></p>
</div>
</div>

<div class="main">
<div class="field--name-field-design">
<div class="field--name-field-design-name">
<div class="js-form">
<input type="text" value="hello">
</div>
</div>
</div>
<div class="field--name-field-design"></div>
</div>