HTML code used in XML- for loop doesn't work properly

This is part of a script I wrote, which is supposed to print 3 tables using the blueprint by appending it to the main structure. When I run this code in HTML it works perfectly. The problem is that I have to use it on the ServiceNow platform where XML is used.

The code still works on the platform, but when I run it, instead of creating 3 tables around 40 more tables are displayed apart from the 3 expected ones! What is the problem and how can I make it work without the extra tables?

I tried to use for(i = 0; i < 3; i++) as well as a while structure, but when I use those nothing is displayed anymore. I also printed the i in console.log and what I noticed is that apart from the values 0, 1, 2 that it should take, it also takes a list of values such as each, item, remove...

<script>
  classroom = {"survey":[
    {"date":"22.12.12", "name":"Kasper", "q1":"1?", "a1":"1", "q2":"2?", "a2":"2", "q3":"3?", "a3":"3", "q4":"4?", "a4":"4", "q5":"5?", "a5":"5", "q6":"6?", "a6":"6"},
    {"date":"22.12.12", "name":"Radu", "q1":"1?", "a1":"1", "q2":"2?", "a2":"2", "q3":"3?", "a3":"3", "q4":"4?", "a4":"4", "q5":"5?", "a5":"5", "q6":"6?", "a6":"6"},
    {"date":"22.12.12", "name":"Julius", "q1":"1?", "a1":"1", "q2":"2?", "a2":"2", "q3":"3?", "a3":"3", "q4":"4?", "a4":"4", "q5":"5?", "a5":"5", "q6":"6?", "a6":"6"}
    ]};

  for(var i in classroom.survey){
    Sdate = classroom.survey[i].date;
    Sname = classroom.survey[i].name;
    Squestion1 = classroom.survey[i].q1;
    Sanswer1 = classroom.survey[i].a1;
    Squestion2 = classroom.survey[i].q2;
    Sanswer2 = classroom.survey[i].a2;
    Squestion3 = classroom.survey[i].q3;
    Sanswer3 = classroom.survey[i].a3;
    Squestion4 = classroom.survey[i].q4;
    Sanswer4 = classroom.survey[i].a4;
    Squestion5 = classroom.survey[i].q5;
    Sanswer5 = classroom.survey[i].a5;
    Squestion6 = classroom.survey[i].q6;
    Sanswer6 = classroom.survey[i].a6;

    console.log("My friend is " + classroom.survey[i].name + " and mobile is: " + i);

    blueprint = '<div class="col-sm-10 col-md-10"> <div class="thumbnail"> <div class="caption"> <p id="Survey"><a href="#" id="btn'+i+'" class="btn btn-default" role="button"><span id="drop'+i+'" class="drop glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span></a> Service Desk Satisfaction Survey taken on '+Sdate+' by '+Sname+' </p><div id="table'+i+'" class="Table"><table style="width:100%" class="table table-condensed"><tr><td><strong>Question</strong></td><td><strong>Response</strong></td></tr>  <tr> <td id="q1'+i+'">'+Squestion1+'</td> <td id="a1'+i+'">'+Sanswer1+'</td></tr> <tr><td id="q2'+i+'">'+Squestion2+'</td> <td id="a2'+i+'">'+Sanswer2+'</td></tr><tr><td id="q3'+i+'">'+Squestion3+'</td><td id="a3'+i+'">'+Sanswer3+'</td></tr><tr><td id="q4'+i+'">'+Squestion4+'</td><td id="a4'+i+'">'+Sanswer4+'</td></tr><tr><td id="q5'+i+'">'+Squestion5+'</td><td id="a5'+i+'">'+Sanswer5+'</td></tr><tr><td id="q6'+i+'">'+Squestion6+'</td><td id="a6'+i+'">'+Sanswer6+'</td></tr></table></div></div></div></div>';

    $("#Surveys").append(blueprint);
  }