JQuery not working in seperate .js file

I'm having an issue with my JQuery code.

When I add this code in script tags on my HTML file, it will work, however when I place it in a separate js file, it will not work. I know it's not an issue with referencing the correct file name and location.

Here is my code:

//Populate date select options
var num = [i];
var by = '<option value="2009">2009</option>'
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var lst = "";
var lst1 = "";
var lst2 = "";
var i;
for (i = 1; i <= 12; i++) {
    lst = lst + '<option value="' + i + '">' + months[i-1] + '</option>';
} 
for (i = 1; i <= 31; i++) {
    num.push(i);
    lst1 = lst1 + '<option value="' + i + '">' + num[i] + '</option>';
}
for (i = 10; i <= 30; i++) {
    num.push(i);
    lst2 = lst2 + '<option value="20' + i + '">20' + num[i] + '</option>';
}
$(document).ready(function(){
    $("#month").html(lst);
});
$(document).ready(function(){
    $("#day").html(lst1);
});
$(document).ready(function(){
    $("#year").html(by + lst2);
});

Thanks for reading!