<table id="dce_table">
</table>
<script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
 
 
        var attributes = ["Attribute 1", "Attribute 2", "Attribute 3","Attribute 4", "Attribute 5"];
        var myTASK = "2";
 
        var alternatives = ["Option 1","Option 2","Option 3"];
        var myVERSION = "2"; // replace with random number (1 to 'total number of versions') later on
        var h = 0;
        var f = 0;
 
        var myData = [
            { "Version":"1","Task":"1","Concept":"1","Att1":"Banane","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
            { "Version":"1","Task":"1","Concept":"2","Att1":"Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
            { "Version":"1","Task":"1","Concept":"3","Att1":"Vanilleeis","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
            { "Version":"1","Task":"2","Concept":"1","Att1":"Birne","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
            { "Version":"1","Task":"2","Concept":"2","Att1":"Sellerie","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
            { "Version":"1","Task":"2","Concept":"3","Att1":"Obstsalat","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
            { "Version":"2","Task":"1","Concept":"1","Att1":"Apfel","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
            { "Version":"2","Task":"1","Concept":"2","Att1":"Gurke","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
            { "Version":"2","Task":"1","Concept":"3","Att1":"Mousse au Chocolat","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
            { "Version":"2","Task":"2","Concept":"1","Att1":"Blaubeeren","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
            { "Version":"2","Task":"2","Concept":"2","Att1":"Zucchini","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
            { "Version":"2","Task":"2","Concept":"3","Att1":"Erdbeerjoghurt","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"}
        ]
 
        var col = ;
        col.push("Option");
        for (var key in myData[0]) {
            if (key != "Version" &amp;&amp; key != "Task" &amp;&amp; key != "Concept") {
                col.push(key);
                }
        }
          col.push("Buttons");
 
 
        var table = document.createElement("table");
 
        var tr = table.insertRow(-1);
      
        for (var i = 0; i < col.length; i++) {
          if (i === 0) {
            var th = document.createElement("th");
            th.innerHTML = "Option";
            tr.appendChild(th);
              }
          else if (i < col.length-1) {
            var th = document.createElement("th");
            th.innerHTML = attributes[i-1];
            tr.appendChild(th);
              }
          else {
            var th = document.createElement("th");
            th.innerHTML = "Buttons go here";
            tr.appendChild(th);
            }
        }
 
        for (var i = 0; i < myData.length; i++) {
             var x = 1;
            if (myData[i]["Version"] === myVERSION &amp;&amp; myData[i]["Task"] === myTASK) {
 
              tr = table.insertRow(-1);
 
              for (var j = 0; j < col.length; j++) {
 
                      if (col[j] === "Buttons") {
                          var createButtonField = tr.insertCell(-1);
                        createButtonField.innerHTML = "Button" + x; // What I want to do is to insert A"x" in here, so the radio-button for A1 in the first cell, A2 in the second cell and so on
                          x += 1;
                      }
                      else if (j == 0) {
                        var createLabel = tr.insertCell(-1);
                        createLabel.innerHTML = alternatives[f];
                        f += 1;
                      }
 
                      else {
                          var tabCell = tr.insertCell(-1);
                          tabCell.innerHTML = myData[i][col[j]];
                      }
              }
            }
        }
 
        var divContainer = document.getElementById("dce_table");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
 
 
    });
 
 
</script>
<style type="text/css">#dce_table {
      margin: auto;
      border: 2px solid black;
      padding: 10px;
  }
  #dce_table tr {
    border: 1px solid black;
    display: inline-block;
    float: left;
  }
  #dce_table th {
    border: 1px solid black;
    display: block;
    padding: 10px;
  }
  #dce_table td {
    border: 1px solid black;
    display: block;
    padding: 10px;
  }
</style>[/i][/i][/i]