The optimal approach for dynamically adding a set of fields and generating JSON based on key-value pairs upon form submission.
<div class="container">
<div class="col-md-4">
<form method="POST" id="myform">
<div class="form-group">
<label for="title">Past Question Title</label>
<input type="text" class="form-control" id="pqtitle" name="pqtitle" placeholder="Type Question Here" cols="40" rows="5" style="resize:vertical;" required>
</div>
<div class="form-group">
<label for="course">Course Code</label>
<select type="text" class="form-control" id="coursecode" name="coursecode" placeholder="Course"></select>
<option></option>
</div>
<div id="fielda">
<div id="fielda0">
<!-- Text input-->
<hr/>
<fieldset>
<legend>Question 1</legend>
<div class="form-group">
<label for="question1">Question</label>
<textarea type="text" class="form-control" id="question1" name="question1" placeholder="Type Question Here" cols="40" rows="5" style="resize:vertical;" required></textarea>
</div>
<div class="form-group">
<label for="nt">Upload Image</label>
<input type="file" name="file" class="filestyle" data-iconName="glyphicon glyphicon-inbox">
</div>
<div class="form-group">
<label for="options">Options</label>
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<div class="col-md-12">
<input type="radio" name="answer1" id="answer1" value="Answer">Answer
<span>-</span>
<label class="sr-only" for="option1">Option</label>
<input type="text" class="form-control" id="option1" name="option1" placeholder="Type Option Here">
</div>
</div>
<button class="btn btn-danger" data-role="remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-primary" data-role="add">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
</div>
<div class="form-group">
<label for="slug1">Slug</label>
<textarea type="text" class="form-control" id="slug1" name="slug1" placeholder="Explain Your Answer" cols="40" rows="5" style="resize:vertical;" required></textarea>
</div>
<div class="form-group">
<label for="point1">Point</label>
<input type="number" class="form-control" id="point1" name="point1" placeholder="Allocate Score Here" required>
<hr/>
</div>
</fieldset>
</div>
<!--end field0-->
</div>
<!--end field-->
<div class="form-group">
<div class="col-dm-2 text-right">
<button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
<button type="submit" class="btn btn-danger" name="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>