Show Hide HTML DIV on Button Click using jQuery

I want to make a div tag invisible when the page loads and make it visible every time a button is clicked. This is what I have on my page:

<div id="realProp1">
    <input name="FirstName[0]" class="form-control" />
</div>
 <div id="realProp2">
    <input name="FirstName[1]" class="form-control" />
</div>

 <div id="realProp3">
    <input name="FirstName[2]" class="form-control" />
</div>

<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>

Whenever AddItem button is clicked, I want to display one Div tag/item so if I click "Add Item" button, I want to make visible only div tag "realProp1", now if I click "AddItem" button again, I want to make visible "realProp2" div tag. Below is what I have, the code is working for one div tag, but not for several div tags:

<script>
    window.onload = function () {
        document.getElementById("realProp1").style.display = 'none';
        document.getElementById("realProp2").style.display = 'none';
        document.getElementById("realProp3").style.display = 'none';
    };

    function Additem() {
        document.getElementById("realProp1").style.display = "";
    };
 </script>

How can I make one div tag visible at each button click.