Записывать содержимое в iframe внутри javascript / jquery iframe

Question

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

<div id="exp_div"></div>
<script>
procedure = [
    [
      "content 1","content 2"
      ]
    ]

procedure.forEach(function(this_proc,index){
  $("#exp_div").append("<iframe id='trial"+index+"' width='800px' height='800px'></iframe>");
  trial_iframe_code = '';
  for(var i = 0; i < this_proc.length; i++){
     trial_iframe_code += "<iframe id='post"+i+"'></iframe>";
  }
  doc = document.getElementById('trial'+index).contentWindow.document;
  doc.open();
  doc.write(trial_iframe_code);
  doc.close();
  for(var i = 0; i < this_proc.length; i++){
    trial_content = this_proc[i];
      console.dir(trial_content);
    doc = document.getElementById('trial'+index).contentWindow.document.getElementById('post'+i);
    doc.open();
    doc.write(trial_content);
    doc.close();
  }
})
</script>

, то есть на этом скрипке (кадры iframe также не работаюткогда я пытаюсь запустить код на SO), я получаю сообщение об ошибке, что «doc.open не является функцией» - что, я думаю, связано с попыткой записи в «пост» iframe в пробном iframe.Можно ли написать в iframe внутри iframe в такой структуре?Мой код близок к правильному, или требуется другой подход?

Чтобы уточнить, это для психологического онлайн-эксперимента по созданию всех задач, которые участник будет выполнять в серии фреймов.Поскольку некоторые из этих задач будут иметь несколько задач, я хочу написать несколько iframe внутри iframe, когда это произойдет.

Рабочий код в этом случае будет генерировать iframe с именем «trial0» внутри «exp_div».Внутри «trial0» будет iframe с идентификатором «post0», в котором написано «content 1», и iframe с идентификатором «post1», в котором будет «content 2».