table creation using 10 length

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class='openDiv hide'>
    <table id="addPropertyValue1"></table>
    <table id="addPropertyValue2"></table>
    <table id="addPropertyValue3"></table>
    <table id="addPropertyValue4"></table>
    <table id="addPropertyValue5"></table>
</div>

CSS

.openDiv table tr td:first-child {
        font-weight: bold;
    }
    .openDiv table {
        width: 20%;
        float: left;
        border-right: 1px dotted;
        text-align: center;
    }
    .openDiv table:first-child {
        border-left:1px dotted;
    }

JavaScript

var n = 50,
    getCollection = {};
for (var i = 1; i <= n; i++) {
    getCollection['property' + i] = "test" + i

}


var forLengthCheck = Object.keys(getCollection)
_.each(getCollection, function (element, key) {
    if (forLengthCheck.indexOf(key) < 10) {
        $('#addPropertyValue1').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
    } else if (forLengthCheck.indexOf(key) < 20) {
        $('#addPropertyValue2').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
    } else if (forLengthCheck.indexOf(key) < 30) {
        $('#addPropertyValue3').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
    } else if (forLengthCheck.indexOf(key) < 40) {
        $('#addPropertyValue4').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
    } else if (forLengthCheck.indexOf(key) < 50) {
        $('#addPropertyValue5').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
    }
})