Div not being created n amount of times from for loop (javascript)

so I'm trying to create a div as many times as is entered in an input field (in the div "controls left" with the name "quantity).

I've created a for loop to append the child divs to the parent div but nothing is happening?

this is the HTML

<!DOCTYPE html>
<html lang="en">

    <head>
        <script src="task3.js"></script>
        <link rel="stylesheet" type="text/css" href="task3.css" />
        <meta charset="UTF-8">
        <title>Practical Excercise 3 - Part 3</title>
    </head>

    <body>

        <div id="main" class="container">
            <button class="right" onclick="menuClick()">MENU</button>
            <h1>Part 3 - Javascript Playground</h1>
            <div id="mcount" onmouseover="mousePassCtr()"></div>
            <div id="posts">

            </div>
            <hr />
            <textarea id="text-content" rows="4" cols="60">Type your text here...</textarea>
            <br />
            <div class="controls left">
                <input type="number" name="quantity" value="1" /><br />
                <input id="blue" type="radio" name="color" value="blue" /> Blue<br />
                <input id="red" type="radio" name="color" value="red" /> Red<br />
                <button onclick="postClick()">Post</button>
            </div>
            <div class="controls left">
                <input type="range" name="visible" min="1" max="10" value="10"/><br />
                <input type="checkbox" name="style" value="bold" /> Bold<br />
                <input type="checkbox" name="style" value="italic" /> Italic<br />
                <select>
                    <option disabled selected value="-1">Choose a post to reply to</option>
                </select>
            </div>
            <hr />
        </div>

        <div id="menu" class="container" style="display:none;">
            <button class="right" onclick="backClick()">BACK</button>
            <p>&nbsp;</p>
            <span>Background Color:</span><input type="text">
        </div>

    </body>

</html>

this is the js

function postClick() {

    var mainPostDiv = document.getElementById("posts"); // Creating variable for the main post div

    // Creating a date paragraph within the HTML doc and appending it with the date of the post
    var dateDiv = document.createElement('P'); // creating the date div
    dateDiv.setAttribute("class", "post-time"); // setting the class of the div
    var date = new Date(); // initializing time of posts date to date variable
    var dateLocale = date.toLocaleString(); // converting the date to a locale version and to a string
    var dateTimeNode = document.createTextNode(dateLocale); // creating a node on DOM tree with the locale date in it
    dateDiv.style.fontWeight = "bold";  // changing the dates font-weight to bold
    dateDiv.style.color ="grey"; // changing the dates font-color to grey
    dateDiv.appendChild(dateTimeNode); // appending the date node to the date div

    // Creating a content paragraph and appending it with the content within the input field
    var contentDiv = document.createElement('P'); // creating the content div
    contentDiv.setAttribute("class", "post-content"); // setting the class of the div
    var content = document.getElementById("text-content").value; // getting the value inside of the input field and assigning it to content
    var contentNode = document.createTextNode(content); // creating a node containing the content value
    contentDiv.appendChild(contentNode); // apending the content node to the content div

    var postNum = document.getElementsByName("quantity").value;
    var blueChecker = document.getElementById("blue");
    var redChecker = document.getElementById("red");

    for (var i = 0; i < postNum; i++) {
        mainPostDiv.appendChild(dateDiv);
        mainPostDiv.appendChild(contentDiv);
    }





}

any help is appreciated, thanks