JSFiddle - React, Tailwind, and code Playground

by Viktor L

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="form-group">
    <form id="form-table-test">
        <table class="table table-striped table-bordered table-test">
            <tbody>           
            </tbody>
        </table>
    </form>
</div>

JavaScript

const data = {
  "q0":{
    "question":"1+1=?",
    "answer":{
      "a0":"1",
      "a1":"2",
      "a2":"0"
    },
    "right":["a1"]
  },
  "q1":{
    "question":"2*2=?",
    "answer":{
      "a0":"1",
      "a1":"4",
      "a2":"5"
    },
      "right":["a1"]
  }
};
//console.log(Object.keys(data).filter((v) => {return data[v] !== undefined}).length);
console.log(Object.keys(data).length);
$.each(data, key=>{
   $('table.table-test > tbody').append('<tr class="q-template"><td class="width-40">'+key+'</td><td style="vertical-align:top;"><textarea rows="4" name="'+key+'[question]" class="form-control">'+data[key].question+'</textarea></td><td><table class="table table-bordered table-answer"><tr class="a-template"><td><input class="form-control" type="text" placeholder="Ответ" name="'+key+'[answer][a1]"></td><td class="width-80"><div class="checkbox"><label>  <input type="checkbox" name="'+key+'[right][]" value="a1"> true</label></div></td><td class="width-80"><button class="delete-answer fa fa-trash btn btn-danger" type="button"></button></td></tr><tfoot><tr><td colspan="3"><button class="add-answer">Добавить ответ</button></td></tr></tfoot></table></td><td><button class="delete-question fa fa-trash btn btn-danger"></button></td></tr>');
});