JSFiddle - React, Tailwind, and code Playground
HTML
<div id='questions'></div>
JavaScript
var _$ = function(id) {
return document.getElementById(id);
};
var handle = function(e, div, num, q) {
num = num || 0;
var n_div = document.createElement('div');
n_div.innerHTML = q[num].replace(/\$\{ans\}/g, e.value);
console.log(e.value)
div.appendChild(n_div);
if (num + 1 < q.length) {
var i = document.createElement('input');
i.type = 'text';
i.onblur = function() {
handle(i, div, num + 1, q);
};
div.appendChild(i);
}
};
var question = [
'What car do you drive?',
'So you drive a ${ans}, what kind?',
'I like the ${ans} kind, where do you drive it?',
'Its nice to drive at ${ans}'
], div;
div = _$('questions');
var n_div = document.createElement('div');
n_div.innerHTML = question[0];
div.appendChild(n_div);
var i = document.createElement('input');
i.type = 'text';
i.onblur = function() {
handle(i, div, 1, question);
};
div.appendChild(i);