Как сделать чтобы каждый символ вставлялся в каждый отдельный тег?

Question

[Shakhrom Mukumov]

Хочу реализовать возможность заполнение бланка документа. Введенные данные в бланке должны быть разбиты по буквам и они в отдельных ячейках. Так вот как разбить введенный текст я разобрался, а вот как уже из массива добавить в отдельные ячейки не могу допереть.

Код:

$('#name').on('keyup change', function(){
  var $t = $(this),
			$cells = $('.cells .cell');
  
  var userName = '';
  $t.each(function(){
    userName += $(this).val().split('');
  })
	console.log(userName)
	
	$cells.each(function(){
    $cells.text(userName);
  })
});

Можно посмотреть живой пример на Codepen

Answer 1

[Ilya Loginov]

Вы немного не правильно добавляете буквы, замените:
cells.append(split);
на
$(this).text(split[i]);

Comments

[Shakhrom Mukumov]

я прошу прощения, немного изменил код, думал успею отредактировать, очень быстро ответили. Спасибо большое за молниеносный ответ.

Answer 2

[0xD34F]

$('#name').on('input', function() {
  $('.cell').text(i => this.value[i] || '');
});

или

document.querySelector('#name').addEventListener('input', e => {
  document.querySelectorAll('.cell').forEach((n, i) => {
    n.textContent = e.target.value[i] || '';
  });
});

Comments

[Shakhrom Mukumov]

Спасибо большое, ваш вариант оказался еще короче. Круто, всё работает как и задумывалось. Спасибо еще раз.