<script>
$(document).ready(function() {
$('#addButton').click(function() {
var newHTML = "";
newHTML += '<p><label> Answer Type</label><select name="ans_type[]"><option value="Image">Image</option><option value="Text">Text</option></select></p><p class="text"><label> Enter Answer</label><textarea rows="5" cols="50" name="ans_text[]"></textarea></p><p class="image"><label> Upload Image</label> <br/><input type="file" name="ans_image[]" class="btn"/></p>';
$('#sandbox').append(newHTML);
});
$(document).on("change", "select[name*='ans_type']", function() {
var answer = $(this).val();
if (answer == "Image") {
$(".text").hide();
$(".image").show();
} else {
$(".text").show();
$(".image").hide();
}
});
});
<div id="sandbox">
<p>
<label> Answer Type</label>
<select name="ans_type[]">
<option value="Image">Image</option>
<option value="Text">Text</option>
</select>
</p>
<p class="text">
<label> Enter Answer</label>
<textarea rows="5" cols="50" name="ans_text[]"></textarea>
</p>
<p class="image">
<label> Upload Image</label> <br/>
<input type="file" name="ans_image[]" class="btn"/>
</p>
<p>
<label> Is Correct Answer</label>
<input type="checkbox" name="isCorrectAnswer[]"/>
</p>
After I click the Add button, the textbox and drop down list and upload image field will duplicate one. But when I click submit button the added textbox and drop down list image upload gone, how could I modify so it will remain even after the page refresh?