Add telephonumber field

js/main.js

@@ -188,7 +188,7 @@
 			event.preventDefault();
 
 			// Container <div> where dynamic content will be placed
-			var container = document.getElementById("attentants");
+			var container = document.getElementById("js-attentants");
 			// Clear previous contents of the container
 			// while (container.hasChildNodes()) {
 			// 	container.removeChild(container.lastChild);
@@ -196,15 +196,61 @@
 			//container.appendChild()
 
 			// Append a node with a random text
-			container.appendChild(document.createTextNode("Member"));
-			// // Create an <input> element, set its type and name attributes
-			// var input = document.createElement("input");
-			// input.type = "text";
-			// input.name = "member" + i;
-			// container.appendChild(input);
-			// // Append a line break 
-			// container.appendChild(document.createElement("br"));
+			//container.appendChild(document.createTextNode("Member"));
+			var outerDiv = document.createElement("div");
+			outerDiv.style="padding-top: 20px;";
+
+			var firstNameDiv = document.createElement("div");
+			firstNameDiv.classList.add('col-md-6');
+			firstNameDiv.classList.add('col-sm-6');
+			var formGroupDiv = document.createElement("div");
+			formGroupDiv.classList.add('form-group');
+			firstNameDiv.appendChild(formGroupDiv);
+
+			//Label
+			var labelElement = document.createElement("label");
+			labelElement.setAttribute("for","firstname");
+			labelElement.classList.add('sr-only');
+			labelElement.innerHTML = "Vorname";
+			formGroupDiv.appendChild(labelElement);
 			
+			//Input
+			var inputElement = document.createElement("input");
+			inputElement.setAttribute("type","firstname");
+			inputElement.classList.add('form-control');
+			inputElement.setAttribute("id","firstname");
+			inputElement.setAttribute("placeholder","Vorname");
+			formGroupDiv.appendChild(inputElement);
+
+			outerDiv.appendChild(firstNameDiv);
+			
+
+			var lastNameDiv = document.createElement("div");
+			lastNameDiv.classList.add('col-md-6');
+			lastNameDiv.classList.add('col-sm-6');
+			var lastnameFormGroupDiv = document.createElement("div");
+			lastnameFormGroupDiv.classList.add('form-group');
+			lastNameDiv.appendChild(lastnameFormGroupDiv);
+
+			//Label
+			var lastNamelabelElement = document.createElement("label");
+			lastNamelabelElement.setAttribute("for","lastname");
+			lastNamelabelElement.classList.add('sr-only');
+			lastNamelabelElement.innerHTML = "Nachname";
+			lastnameFormGroupDiv.appendChild(lastNamelabelElement);
+
+			//Input
+			var firstNameInputElement = document.createElement("input");
+			firstNameInputElement.setAttribute("type","lastname");
+			firstNameInputElement.classList.add('form-control');
+			firstNameInputElement.setAttribute("id","lastname");
+			firstNameInputElement.setAttribute("placeholder","Nachname");
+			lastnameFormGroupDiv.appendChild(firstNameInputElement);
+
+			outerDiv.appendChild(lastNameDiv);	
+
+			container.appendChild(outerDiv);
+
 			return false;
 		});
 	}