Create an Array in For loop without running over the array
<p>I'm trying to do a college project.
I'm supposed to create 'Notes' add them to an array and keep them in my local storage.
Now the notes should be created with a Fade in effect (transition) using CSS3.
Everything works perfectly until I create the second note at which point my whole array is run over again which makes all the notes to appear in fade.</p>

<p>CSS: </p>

<pre><code>.note_input {
    height:255px;
    width:200px;
    background-image:url('../img/notebg.png');
    padding-top:25px;
    padding-left:10px;
    display:inline-block;
    animation: fadein 0.3s; 
    -webkit-animation: fadein 0.3s;
}
    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-webkit-keyframes fadein { 
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
</code></pre>

<p>And this is my JS to create the Array + Note itself:</p>

<pre><code>function AddNote (){
    var input = document.getElementById("txt").value;
    var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
    var time = d.getHours() + ":" + d.getMinutes();
    var n = new NoteCrt(input,time,date);
    notes.push(n);
    Note();
}
function Note(){
    var note_d = "&lt;div&gt;";
    for (var i = 0 ; i &lt; notes.length ; i++) {
        note_d += "&lt;span id='fade' class='note_input'&gt;" + "&lt;div class='flow' &gt;&lt;p&gt;"+notes[i].input+"&lt;/p&gt;&lt;/div&gt;&lt;/br&gt;" + "&lt;/br&gt;" +"Time:  "+ notes[i].time + "&lt;/br&gt;" +"Date:  "+ notes[i].date;
        note_d +=  "&lt;/span&gt;";
    }
    note_d += "&lt;/div&gt;";
    document.getElementById("note_div").innerHTML = note_d;
    notes_j = JSON.stringify(notes, null, " ");
    localStorage.setItem("NOTE",notes_j);
    notes_p = JSON.parse(notes_j);
    console.log(notes_p);
}
</code></pre>

<p>What happens is that all the notes that are present are recreated with a fade in effect every time...
Any help?</p>