Dinamyc inputs and focused

by Arturo Gallegos

HTML

<ul id="list_input">
  
</ul>
<button id="addInput">Agregar input vanilla</button>
<button id="addInputJquery">Agregar input jQuery</button>

CSS

li{padding:5px 0;}

JavaScript

const listItems = document.getElementById('list_input');
const addItem = document.getElementById('addInput');
let index = 0;
addItem.addEventListener('click', () => {
	listItems.insertAdjacentHTML('beforeend', `<li>index ${index} 
  <input id="input_${index}" /></li>`);
  document.getElementById(`input_${index}`).focus();
  index++;
});

// jQuery
jQuery('#addInputJquery').click(() => {
	jQuery('#list_input').append(`<li>index ${index} 
  <input id="input_${index}" /></li>`);
  jQuery(`#input_${index}`).focus();
  index++;
});