form dynamic

@extends('layouts.dashboard')

@section('title')
  About
@endsection

@section('subtitle')
  Post New
@endsection

@section('breadcrumb')
<li><a href="/dashboard"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<li>Contents</li>
<li><a href="/dashboard/contents/abouts/"></i> Abouts</a></li>
<li><a href="/dashboard/contents/abouts/timeline"></i> Timeline</a></li>
<li class="active">Post New</li>
@endsection

@section('content')
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=v29wec9q4tjtz0ops1uv76s6herjkcuyrkgqrrgihm7czbe1"></script>
<script>tinymce.init({ selector:'textarea' });</script>
<form id="create_new_post" name="create_new_post" role="form" action="{{ route('abouts.timelineStore') }}" method="post">
  {{ csrf_field() }}
  <div class="form-group">
    <label>Year</label>
    <input type="text" name="year" class="form-control" value="" />
  </div>
  <div id="event_input">
    <div class="form-group">
        <label>Month</label>
        <input type="text" name="event[0][month]" class="form-control" value="" />
    </div>
    <div class="form-group">
        <label>Event Description</label>
        <textarea rows="5" form="create_new_post" name="event[0][event_desc]" class="form-control"></textarea>
    </div>
  </div>
  <div class="form-group">
    <a href="javascript:" onclick="addNewItem()" class="btn btn-default">Add Another Event</a>
    <input type="submit" class="btn btn-info" value="Save">
  </div>
</form>
@endsection

@section('js')
<script>
var index = 1;
function addNewItem() {
    var formgroup = document.createElement("div");
    formgroup.classList.add("form-group");

    var formgroup2 = document.createElement("div");
    formgroup2.classList.add("form-group");

    var label1 = document.createElement("label");
    label1.innerHTML = "Month";
    formgroup.appendChild(label1);

    var input1 = document.createElement("input");
    input1.setAttribute("type", "text");
    input1.setAttribute("name", "event["+index+"][month]");
    input1.classList.add("form-control");
    formgroup.appendChild(input1);

    var label2 = document.createElement("label");
    label2.innerHTML = "Event Description";
    formgroup2.appendChild(label2);

    var input2 = document.createElement("textarea");
    input2.setAttribute("rows", "5");
    input2.setAttribute("form", "create_new_post");
    input2.setAttribute("name", "event["+index+"][event_desc]");
    input2.classList.add("form-control");
    formgroup2.appendChild(input2);

    document.getElementById("event_input").appendChild(formgroup);
    document.getElementById("event_input").appendChild(formgroup2);
    tinymce.init({ selector:'textarea' });

    index = index + 1;
}
</script>
@endsection