In this script: last item is not selected to apply colorMe function
var k =0;
var userarray = [];
var dayarray = [];
var dayarray2 = [];
var dayarray3 = [];
var data = 0;
function colorMe(param,param_af,param_eve, param2)
{
/*console.log("DAY "+param);
console.log("user "+param2);*/
//console.log("k= "+k);
console.log("data= "+data);
userarray.push(param2);
//console.log("mY "+userarray[k]);
dayarray.push(param);
dayarray2.push(param_af);
//console.log("afternoon "+dayarray2[k]);
dayarray3.push(param_eve);
//console.log("evening "+dayarray3[k]);
//console.log("Day "+dayarray[k]);
var len = userarray.length;
console.log("K= "+k);
for(;data < k;data++)
{
//console.log("data="+ data);
var arr = dayarray[data];
var arr2 = dayarray2[data];
var arr3 = dayarray3[data];
$("div.morning_"+userarray[data]+" span").each(function() {
if(arr.indexOf($(this).attr("class")) > -1) {
$(this).css("color","#26F525");
}
});
$("div.afternoon_"+userarray[data]+" span").each(function() {
if(arr2.indexOf($(this).attr("class")) > -1) {
$(this).css("color","#26F525");
}
});
$("div.evening_"+userarray[data]+" span").each(function() {
if(arr3.indexOf($(this).attr("class")) > -1) {
$(this).css("color","#26F525");
}
});
}
**
//This identifies the last item, can anything be done here to apply color on matching string like the rest?
**
if(data == (localStorage.size-1)){
alert("data"+data+" k= "+k+"size= "+localStorage.size+"user= "+param2+"morn= "+param+"aftr="+param_af+"eve="+param_eve);
}
k++;
}
T'm trying to color only the last item in the array. How do I do that? Here's my fiddle: https://jsfiddle.net/axpbe377/2/
HTML structure
<div id='1'>
User 1234
<div class='morning_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='afternoon_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='evening_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
<br/><br/>
<div id='2'>
User 4455
<div class='morning_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='afternoon_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='evening_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
<br/><br/>
<div id='3'>
User 9868
<div class='morning_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='afternoon_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='evening_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
https://jsfiddle.net/axpbe377/3/
<div id='1'>
User 1234
<div class='morning_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='afternoon_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='evening_1234'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
<br/>
<br/>
<div id='2'>
User 4455
<div class='morning_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='afternoon_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='evening_4455'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
<br/>
<br/>
<div id='3'>
User 9868
<div class='morning_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='afternoon_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
<div class='evening_9868'>
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thrs</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
SCRIPT
var data = [{
user_id: 1234,
morning: 'Sat,Sun',
afternoon: 'Tue,Thrs,Sun',
evening: ''
}, {
user_id: 4455,
morning: 'Thrs,Fri,Sun',
afternoon: 'Tue',
evening: 'Mon'
}, {
user_id: 9868,
morning: 'Tue,Wed',
afternoon: 'Tue',
evening: 'Fri,Sun'
}];
data.forEach(function(user) {
var mornings = user.morning.split(',');
var afternoons = user.afternoon.split(',');
var evenings = user.evening.split(',');
$("div.morning_" + user.user_id + " span").filter(function() {
return mornings.indexOf(this.innerHTML) > -1;
}).css('color', '#26F525');
$("div.afternoon_" + user.user_id + " span").filter(function() {
return afternoons.indexOf(this.innerHTML) > -1;
}).css('color', '#26F525');
$("div.evening_" + user.user_id + " span").filter(function() {
return evenings.indexOf(this.innerHTML) > -1;
}).css('color', '#26F525');
});
If you want to have your function call...
https://jsfiddle.net/axpbe377/5/
data.forEach(function(user){
colorMe(user.morning, user.afternoon, user.evening, user.user_id);
});
function colorMe(param, param2, param3, user_id){
var mornings = param.split(',');
var afternoons = param2.split(',');
var evenings = param3.split(',');
$("div.morning_"+ user_id +" span").filter(function(){
return mornings.indexOf(this.innerHTML) > -1;
}).css('color', '#26F525');
$("div.afternoon_"+ user_id +" span").filter(function(){
return afternoons.indexOf(this.innerHTML) > -1;
}).css('color', '#26F525');
$("div.evening_"+ user_id +" span").filter(function(){
return evenings.indexOf(this.innerHTML) > -1;
}).css('color', '#26F525');
}
Related
I'm having trouble hiding relevant data with JS.
In my code I have data-type = "power" and data-type = "grill" which are added to the products.
I want the script to check sort filters and hide those that are not present on the page.
Unfortunately, when I have two cases, it doesn't work as it should.
Grill filters do not appear even though they should.
$('.stat').on('click', function() {
var $stats = $('.stat:checked');
var $items = $('.list .product');
$items.show();
if ($stats.length == 0)
return;
var $vstats = $.map($stats, function(o) {
return $(o).data('id');
});
$stats.each(function() {
var $stat = $(this);
$items.filter(function() {
var $currentitem = $(this).data($stat.data('type'));
if ($currentitem.toString().indexOf(",") > -1) {
var $item = $currentitem.split(",");
var hit = 0;
$item.forEach(function(m) {
if ($vstats.indexOf(m) > -1) {
hit++;
}
});
if (hit > 0) {
return false;
} else {
return true;
}
} else {
if ($vstats.indexOf($currentitem) > -1) {
return false;
} else {
return true;
}
}
}).hide();
})
});
var powers = $('[data-power]').map(function() {
return this.dataset.power;
}).get();
var grills = $('[data-grill]').map(function() {
return this.dataset.grill;
}).get();
$('[data-id]').filter(function() {
return !powers.includes(this.dataset.id)
return !grills.includes(this.dataset.id)
}).closest("label").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="power">
<h2>power</h2>
<div class="checkbox">
<label>
<input data-id="750" data-type="power" class="stat power" type="checkbox">750
</label>
<label>
<input data-id="800" data-type="power" class="stat power" type="checkbox">800
</label>
<label>
<input data-id="1200" data-type="power" class="stat power" type="checkbox">1200
</label>
</div>
</div>
<div class="grill">
<h2>grill</h2>
<div class="checkbox">
<label>
<input data-id="yes" data-type="grill" class="stat grill" type="checkbox">yes
</label>
<label>
<input data-id="no" data-type="grill" class="stat grill" type="checkbox">no
</label>
</div>
</div>
<div class="list">
<div class="col-6 col-lg-3 product" data-power="750" data-grill="yes">
<a href="/href/freh">
<div class="product-page__container product-container text-center">
<div class="product-page__name">
<h2><span class="d-block">Product Name</span> Product 1</h2>
</div>
</div>
</a>
</div>
<div class="col-6 col-lg-3 product" data-power="800" data-grill="yes">
<a href="/href/freh">
<div class="product-page__container product-container text-center">
<div class="product-page__name">
<h2><span class="d-block">Product Name 2</span> Product 2</h2>
</div>
</div>
</a>
</div>
</div>
You have to change your filter function. You are returning two values but it stops on first return.
Change
return !powers.includes(this.dataset.id) and return !grills.includes(this.dataset.id)
to
return !powers.includes(this.dataset.id) && !grills.includes(this.dataset.id);
I hope this will solve you problem.
I am trying to delete the entered task by the delete button which is created by the end of each task. I am posting my full code here
It's a simple to-do list by using bootstrap CDN .
I want to delete the row which contains user enter task,serial number,time and date.
var task = document.getElementById("enter");
var bttn = document.getElementById("button2");
var rowIdVar = document.getElementById("test");
var rowIdVar1 = document.getElementById("id1");
bttn.addEventListener("click", add);
var x = 0;
function add() {
var val1 = task.value;
if (!val1) {
alert("Please Enter A Task");
} else {
sno();
name();
tdate();
time();
cButton();
var new1 = document.createElement("l");
rowIdVar1.appendChild(new1);
}
}
function sno() {
if (x == x) {
x = x + 1;
var list1 = document.createElement("l");
list1.innerHTML = x;
rowIdVar.appendChild(list1).setAttribute("class", "col-md-2");
}
}
function name() {
var val = task.value;
var list2 = document.createElement("l");
list2.innerHTML = val;
rowIdVar.appendChild(list2).setAttribute("class", "col-md-4");
task.value = "";
}
function tdate() {
var d = new Date();
var date = d.getDate();
var month = d.getMonth();
var year = d.getFullYear();
var result = (date + "/" + month + "/" + year);
var lm = document.createElement("l");
lm.innerHTML = result;
rowIdVar.appendChild(lm).setAttribute("class", "col-md-2");
}
function time() {
var t = new Date();
var hour = t.getHours();
var minutes = t.getMinutes();
var seconds = t.getSeconds();
var result1 = (hour + ":" + minutes + ":" + seconds);
var lm1 = document.createElement("l");
lm1.innerHTML = result1;
rowIdVar.appendChild(lm1).setAttribute("class", "col-md-2");
}
function cButton() {
var btn = document.createElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("value", "delete");
btn.setAttribute("class", "btn btn-danger");
rowIdVar.appendChild(btn).setAttribute("class", "col-md-2");
btn.addEventListener("click", deleteElements);
}
function deleteElements() {
rowIdVar1.parentNode.removeChild(rowIdVar);
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="row">
<div class="col-md-10 col-sm-10 h">
<center>
<h1>TO DO LIST...</h1>
</center><br>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-10 col-sm-10 bg">
<input type="text" class="form-control " placeholder="Enter task" id="enter">
</div>
<div class="col-md-2 col-sm=2">
<button type="button" class="btn btn-primary btn-lg" id="button2"><center>ADD</center></button>
</div>
</div><br><br>
</div>
<div class="container">
<div class="row" id="id1">
<div class="col-md-2 b">
<h1>S.no</h1>
</div>
<div class="col-md-4 b">
<h1>Enter Task</h1>
</div>
<div class="col-md-2 b">
<h1>Date</h1>
</div>
<div class="col-md-2 b">
<h1>Time</h1>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="row" id="test">
<div class="col-md-2"> </div>
<div class="col-md-4"> </div>
<div class="col-md-2"> </div>
<div class="col-md-2"> </div>
<div class="col-md-2"> </div>
</div>
var task = document.getElementById("enter");
var bttn = document.getElementById("button2");
var rowIdVar = document.getElementById("test");
var rowIdVar1 = document.getElementById("id1");
bttn.addEventListener("click", add);
var x = 0;
function add() {
var val1 = task.value;
if (!val1) {
alert("Please Enter A Task");
} else {
sno();
name();
tdate();
time();
cButton();
var new1 = document.createElement("l");
rowIdVar1.appendChild(new1);
}
}
function sno() {
if (x == x) {
x = x + 1;
var list1 = document.createElement("li");
list1.innerHTML = x;
rowIdVar.appendChild(list1).setAttribute("class", "col-md-2");
}
}
function name() {
var val = task.value;
var list2 = document.createElement("li");
list2.innerHTML = val;
rowIdVar.appendChild(list2).setAttribute("class", "col-md-4");
task.value = "";
}
function tdate() {
var d = new Date();
var date = d.getDate();
var month = d.getMonth();
var year = d.getFullYear();
var result = (date + "/" + month + "/" + year);
var lm = document.createElement("li");
lm.innerHTML = result;
rowIdVar.appendChild(lm).setAttribute("class", "col-md-2");
}
function time() {
var t = new Date();
var hour = t.getHours();
var minutes = t.getMinutes();
var seconds = t.getSeconds();
var result1 = (hour + ":" + minutes + ":" + seconds);
var lm1 = document.createElement("li");
lm1.innerHTML = result1;
rowIdVar.appendChild(lm1).setAttribute("class", "col-md-2");
}
function cButton() {
var btn = document.createElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("value", "delete");
btn.setAttribute("class", "btn btn-danger");
rowIdVar.appendChild(btn).setAttribute("class", "col-md-2");
btn.addEventListener("click", deleteElements);
}
function deleteElements() {
rowIdVar.parentNode.removeChild(rowIdVar);
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<body id="body">
<div class="row">
<div class="col-md-10 col-sm-10 h">
<center>
<h1>TO DO LIST...</h1>
</center><br>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-10 col-sm-10 bg">
<input type="text" class="form-control " placeholder="Enter task" id="enter">
</div>
<div class="col-md-2 col-sm=2">
<button type="button" class="btn btn-primary btn-lg" id="button2"><center>ADD</center></button>
</div>
</div><br><br>
</div>
<div class="container">
<div class="row" id="id1">
<div class="col-md-2 b">
<h1>S.no</h1>
</div>
<div class="col-md-4 b">
<h1>Enter Task</h1>
</div>
<div class="col-md-2 b">
<h1>Date</h1>
</div>
<div class="col-md-2 b">
<h1>Time</h1>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="row" id="test">
<div class="col-md-2"> </div>
<div class="col-md-4"> </div>
<div class="col-md-2"> </div>
<div class="col-md-2"> </div>
<div class="col-md-2"> </div>
</div>
jQuery previous button not working as expected.
Basically the best way to explain it is if I'm on question 5 and I click the previous button, it defaults to question 1 rather than going to question 4.
So it's defaulting to question 1... That's a problem.
What to do?
jQuery is in the bottom in script tags.
if (i.Question_Type == "DROPDOWN")
{
<div class="container text-center">
<div class="row idrow" data-questions="#counter">
#{
counter++;
}
<div id="question1" class="form-group">
<label class="lab text-center" for="form-group-select">
#i.Question_Order #Html.Raw(#i.Question)
</label>
<select class="form-control" id="form-group-select">
#for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<option> #i.qOps.options[t]</option>
}
else
{
<option> #x</option>
}
}
</select>
</div>
</div>
</div>
}
if (i.Question_Type == "RADIO")
{
<div class="container">
<div class="row idrow" data-questions="#counter">
#{counter++;
}
<div class="form-group">
<label class="lab" for="questions">
#i.Question_Order #i.Question
</label>
<div class="row">
<div class="col-xs-12">
<div id="question1" class="radio-inline">
#for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<label class="radio-inline"><input type="radio" name="question"> #i.qOps.options[t]</label>
}
else
{
<label class="radio-inline"><input type="radio" min="0" max="#x" name="question"></label>
}
}
</div>
</div>
</div>
</div>
</div>
</div>
}
if (i.Question_Type == "CHECKBOX")
{
for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
{
#*<div class="container">
<div class="row">
<label>#y</label> <input type="checkbox" name="question">
</div>
</div>*#
}
}
}
<div class="azibsButtons">
<button type="button" id="previous" class="btn btn-primary pull-left">Prev</button>
<button type="button" id="next" class="btn btn-primary pull-right">Next</button>
</div>
<script>
$(document).ready(function () {
$(".idrow").each(function (i) {
var inner = $(this).data('questions');
if (inner == 0) {
$(this).removeClass('hidden');
} else {
$(this).addClass('hidden');
}
});
$("#next").click(function () {
$(".idrow").each(function (i) {
var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal++;
inp.addClass('hidden');
$('[data-questions=' + dataVal + ']').removeClass('hidden');
return false;
}
});
$("#previous").click(function () {
$(".idrow").each(function (i) {
var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal--;
inp.addClass('hidden');
$('[data-questions=' + dataVal + ']').removeClass('hidden');
return false;
}
});
});
});
});
</script>
Hey guys I got the solution Thanks to Daniel.
The next event closing braces were wrapped around the previous event, which caused the problem to default to question 1 when clicked previous.
$("#next").click(function () {
$(".idrow").each(function (i) {
var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal++;
inp.addClass('hidden');
$('[data-questions=' + dataVal + ']').removeClass('hidden');
return false;
}
});
});
$("#previous").click(function () {
$(".idrow").each(function (i) {
var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal--;
inp.addClass('hidden');
$('[data-questions=' + dataVal + ']').removeClass('hidden');
return false;
}
});
});
in jsfiddle im trying to make a configuration generator for an app i have, basically the format is as follows:
type;user;pass;ip:port
with ip:port being optional
it would be generated from a selectbox two textboxes, where its inputted as user:pass and in the other ip:port, if you don't understand, this is a little visual ive made:
pic of what i want
For what it's worth:
document.querySelector('button').addEventListener('click', function() {
var type = document.getElementById('type').value;
var useipport = document.getElementById('useipport').checked;
var userpass = document.getElementById('userpass').value;
var ipport = document.getElementById('ipport').value;
var output = document.getElementById('output');
var users = [],
ips = [],
config = [];
if (userpass.length > 0) users = userpass.split('\n');
if (ipport.length > 0) ips = ipport.split('\n');
var ix = 0;
while (ix < users.length || ix < ips.length) {
var user = '';
user += type + ';';
if (users[ix]) user += users[ix] + ';';
if (useipport && ips[ix]) user += ips[ix];
config.push(user);
ix++;
}
output.value = config.join("\n");
});
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="six columns">
<select id="type">
<option value="PT">PT</option>
<option value="GL">GL</option>
</select>Type
</div>
<div class="six columns">
<label>
<input type="checkbox" id="useipport">
<span class="label-body">Use IP/Port</span>
</label>
</div>
</div>
<div class="row">
<div class="six columns">
<textarea class="u-full-width" placeholder="abc:123" id="userpass"></textarea>
</div>
<div class="six columns">
<textarea class="u-full-width" placeholder="1.1.1.1:1111" id="ipport"></textarea>
</div>
</div>
<div class="row">
<div class="six columns">
<textarea class="u-full-width" id="output"></textarea>
</div>
<div class="six columns">
<button>Create</button>
</div>
</div>
</div>
I am implementing an extend form function, in which there is a label text (marked in html) that I hope to include a number to increment.
So every time when a form is extended/cloned, the label text in the extended form shows Student 1, Student 2... accordingly. Can I be advised how to do that?
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]');
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;
var theNames3 = newFields[i].htmlFor;
if (theNames3)
newFields[i].htmlFor = theNames3 + counter;
}
var insertHere = document.getElementById(val2);
insertHere.parentNode.insertBefore(newField,insertHere);
}
<span id="readroot" style="display: none">
<div class="row">
<div class="col-lg-3">
Grade 6
</div>
<div class="col-lg-3">
Male
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">
<!-- Student number needs to increase when a new form is extended. -->
<label>Student 1</label>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<label for="display_student_1_grade">Grade</label>
<div id="display_student_1_grade"></div>
</div>
<div class="col-lg-6">
<label for="display_student_1_gender">Gender</label>
<div id="display_student_1_gender"></div>
</div>
</div>
</div>
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</span>
<span id="writeroot"></span>
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="One More Student" />
To answer the question directly, you just need to find the appropriate <label> and update the innerHTML (see below).
However, what you are doing here can be achieved using the new HTML5 template element without having to hide <span> elements. Additionally, you have to remember that when you remove a student, the counter isn't going to decrease, nor are the already added students going to update. If you want that kind of functionality, you may want to look into a Javascript MVVM, like Angular.
var counter = 0;
function moreFields(val1, val2, val3) {
counter++;
var newField = document.getElementById(val1).cloneNode(true);
newField.id = '';
newField.style.display = 'block';
// Find the label here and update the innerHTML appropriately
newField.querySelector(".col-lg-12 label").innerHTML = "Student " + counter;
var newFields = newField.querySelectorAll('[name], [id], [for]');
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;
var theNames3 = newFields[i].htmlFor;
if (theNames3)
newFields[i].htmlFor = theNames3 + counter;
}
var insertHere = document.getElementById(val2);
insertHere.parentNode.insertBefore(newField,insertHere);
}
<span id="readroot" style="display: none">
<div class="row">
<div class="col-lg-3">
Grade 6
</div>
<div class="col-lg-3">
Male
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">
<!-- Student number needs to increase when a new form is extended. -->
<label>Student 1</label>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<label for="display_student_1_grade">Grade</label>
<div id="display_student_1_grade"></div>
</div>
<div class="col-lg-6">
<label for="display_student_1_gender">Gender</label>
<div id="display_student_1_gender"></div>
</div>
</div>
</div>
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</span>
<span id="writeroot"></span>
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="One More Student" />