JSFiddle - React, Tailwind, and code Playground

HTML

<table id="display_table">
    <tbody>
        <tr>
            <td>No. of Questions:</td>
            <td><input type="text" id="questions_num"/></td>
        </tr>
        <tr>
            <td>No. of Options:</td>
            <td><input type="text" id="options_num"/></td>
        </tr>    
    </tbody>
    <tbody id="rows"></tbody>
</table>

CSS

table {border-collapse: collapse;}
td {
    padding: 5px 8px;
    border: 1px #DDD solid;
}
tbody#rows {
    background: #EEE;
}

JavaScript

document.getElementById("options_num").onkeyup = function () {
    
    var options = document.getElementById("options_num"),
        optionsNum = parseInt(options.value),
        tbody = document.getElementById("rows"),
        rows = '';
    
    for (var i = 1; i <= optionsNum; i++) {
        rows += "<tr><td>Option " + i + "</td><td>" + "<input type='text' id='option_" + i + "'</td></tr>";
    }
    
    tbody.innerHTML = rows;
    options.focus();
}