I am trying to reproduce the following image in HTML / Javascript:

[![Results Page correct](https://i.stack.imgur.com/kvmqk.jpg)](https://i.stack.imgur.com/kvmqk.jpg)

This is how far I have got:

[![enter image description here](https://i.stack.imgur.com/8iHfB.png)](https://i.stack.imgur.com/8iHfB.png)

This is my code in javascript:

```
function createLink(text, parentElement) {
    var a = document.createElement('a');
    var linkText = document.createTextNode(text);
    a.appendChild(linkText);
    temp1 = text.replace("/","-");
    temp2 = res1.replace("/","-");
    a.href = "http://www.drakedesign.co.uk/mdmarketing/uploads/" + temp2 + ".csv";
    parentElement.appendChild(a);
}

var txtFile8 = new XMLHttpRequest();
txtFile8.open("GET", "http://www.drakedesign.co.uk/mdmarketing/uploads/date.txt", true);
txtFile8.onreadystatechange = function() {
    if (txtFile8.readyState === 4) {  // Makes sure the document is ready to parse.
        if( (txtFile8.status == 200) || (txtFile8.status == 0) ) { // Makes sure it's found the file.
            allText8 = txtFile8.responseText;
            arrayOfLines8 = allText8.match(/[^\r\n]+/g);
            for (i = 0; i < arrayOfLines8.length - 1; i++) { 
                createLink(arrayOfLines8[i], document.getElementById("previousResultsList"));
            }        
        }
    }
};

txtFile8.send(null);

```

This code snippet does the following:
reads an online textfile containing dates.
separates each date into an element in an array.
runs through a for loop making each date into a link in the div previousResultsList

I am writing to ask how I could possibly separate the elements added to the div:"previousResultsList"

The first problem is:

1) Separating the elements out simply one after another in a list form.

2) How would I separate the dates into chunks for any dates in that month and attach the image on the side.