如何记住一个表单是扩展的

我在我的项目中有一个多步骤表单，其中的第一步有一个javascript扩展字段函数，用户可以在其中添加其他字段。如果用户进入下一步，数据当然会存储在Session中，直到最终提交。然而，扩展形式将不会被记住。如果用户从下一步返回，则不显示附加字段及其数据，更糟糕的是，如果附加字段中的数据无效，则用户不会看到它，因为消息显示在消失的字段下面(我使用Cakephp默认验证)。

是否有一种方法，比如在会话中存储设置，使其保持不变?

var counter = 0;
function moreFields(val1, val2, val3) {
	counter++;
	var newField = document.getElementById(val1).cloneNode(true);
	newField.id = '';
	newField.style.display = 'block';
	var newFields = newField.querySelectorAll('[name], [id], [for], [data-display]');
		for (var i=0;i<newFields.length;i++) {
			var theNames = newFields[i].name
			if (theNames)
				newFields[i].name = "data[" + val3 + "][" + counter + "][" + theNames + "]";
			var theNames2 = newFields[i].id;
	        if (theNames2)
	            newFields[i].id = theNames2 + counter;
	        	console.log(newFields[i].id); 
	        var theNames3 = newFields[i].htmlFor;
	        if (theNames3)
	            newFields[i].htmlFor = theNames3 + counter;
	        	//console.log(newFields[i].htmlFor);  
    		var theNames4 = newFields[i].dataset.display;
	        if (theNames4)
	            newFields[i].dataset.display = theNames4 + counter;
	        	console.log(newFields[i].dataset.display);  	
		}			
	var insertHere = document.getElementById(val2);
	insertHere.parentNode.insertBefore(newField,insertHere);
}

<span id="readroot" style="display: none">
<div class="row">
	<div class="col-lg-6">
		<div class="form-group required">
            <label for="Student1Grade">Grade</label>
            <select name="grade" data-display="#display_student_1_grade" class="form-control" id="Student1Grade" required="required">
                <option value="">Please Select</option>
                <option value="1">Grade 1</option>
                <option value="1">Grade 2</option>
            </select>
        </div>						
	</div>
	<div class="col-lg-6">
		<div class="form-group">
            <label for="Student1Gender">Gender</label>      
            <select name="gender" data-display="#display_student_1_gender" class="form-control" id="Student1Gender">
                <option value="1">Male</option>
                <option value="2">Female</option>
            </select>
        </div>
	</div>	
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
</span>
<span id="writeroot"></span>		
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="Add Field" />