Reset Multiple div Positions on Button Click

Reset Multiple div Positions on Button Click

I'm creating a card like game and have 28 divs (cards) which when the web page loads are all located within a parent div (#answerCardHolder) which acts as a holder for the 28 divs. The 28 divs currently use a float: left; to position them within the parent div (with relative positioning). Each of the 28 divs are draggable and droppable, the idea being the user drags and drops each card to the correct location as part of the game.

Once the game is complete I want the user to be able to click a button to replay the game. What I want to be able to do when the button is clicked is for all 28 divs to be reset to their original positions, i.e. the positions they were in on page load. Currently the 28 divs remain in the position they've been dragged to.

I've looked at the 'revert' event but I don't think this would achieve what I need for all 28 divs, as in I don't want the div positions to be rest until the user clicks a button to replay the game and I'm unsure how this could be used to reset all 28 div positions in one go.

Is there an easy way to achieve this?

HTML
  1. <div id="answerCardHolder">

                    <div id="a1" class="answerCard">
                        <p class="noselect">1</p>
                    </div>
                  
                    <div id="a2" class="answerCard">
                        <p class="noselect">2</p>
                    </div>

                    <div id="a3" class="answerCard">
                        <p class="noselect">3</p>
                    </div>

                    <div id="a4" class="answerCard">
                        <p class="noselect">4</p>
                    </div>

                    <div id="a5" class="answerCard">
                        <p class="noselect">5</p>
                    </div>

                    <div id="a6" class="answerCard">
                        <p class="noselect">6</p>
                    </div>

                    <div id="a7" class="answerCard">
                        <p class="noselect">7</p>
                    </div>

                    <div id="a8" class="answerCard">
                        <p class="noselect">8</p>
                    </div>

                    <div id="a9" class="answerCard">
                        <p class="noselect">9</p>
                    </div>

                    <div id="a10" class="answerCard">
                        <p class="noselect">10</p>
                    </div>

                    <div id="a11" class="answerCard">
                        <p class="noselect">11</p>
                    </div>

                    <div id="a12" class="answerCard">
                        <p class="noselect">12</p>
                    </div>

                    <div id="a13" class="answerCard">
                        <p class="noselect">13</p>
                    </div>

                    <div id="a14" class="answerCard">
                        <p class="noselect">14</p>
                    </div>

                    <div id="a15" class="answerCard">
                        <p class="noselect">15</p>
                    </div>

                    <div id="a16" class="answerCard">
                        <p class="noselect">16</p>
                    </div>

                    <div id="a17" class="answerCard">
                        <p class="noselect">17</p>
                    </div>

                    <div id="a18" class="answerCard">
                        <p class="noselect">18</p>
                    </div>

                    <div id="a19" class="answerCard">
                        <p class="noselect">19</p>
                    </div>

                    <div id="a20" class="answerCard">
                        <p class="noselect">20</p>
                    </div>

                    <div id="a21" class="answerCard">
                        <p class="noselect">21</p>
                    </div>

                    <div id="a22" class="answerCard">
                        <p class="noselect">22</p>
                    </div>

                    <div id="a23" class="answerCard">
                        <p class="noselect">23</p>
                    </div>

                    <div id="a24" class="answerCard">
                        <p class="noselect">24</p>
                    </div>

                    <div id="a25" class="answerCard">
                        <p class="noselect">25</p>
                    </div>

                    <div id="a26" class="answerCard">
                        <p class="noselect">26</p>
                    </div>

                    <div id="a27" class="answerCard">
                        <p class="noselect">27</p>
                    </div>

                    <div id="a28" class="answerCard">
                        <p class="noselect">28</p>
                    </div>

                </div>

CSS

  1. #answerCardHolder {
        position: relative;
        top: 100px;
        left: 100px;
        width: 500px;
        height: 2040px;
        display: inline-block;
    }

    .answerCard {
        position: relative;
        top: 0px;
        left: 20px;
        width: 150px;
        height: 150px;
        background-color: red;
        line-height: 150px;
        cursor: pointer;
        display: table;
        float: left;
        z-index: 2;
    }

    .answerCard p {
        font-size: 120px;
        font-weight: 700;
        color: #fff;
        line-height: 150px;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
    }

jQuery

  1. $(document).ready(function() {
       
        $(".answerCard").draggable({
            stack: ".answerCard"
        });
       
        $(".dropLeft").droppable({
            drop: function(event, ui) {
                $(ui.draggable).detach().css({
                    top: 0,
                    left: 0
                }).appendTo(this)
               
                var leftNumber = $.trim(ui.draggable.text());
            }
        });
       
       
        $(".dropMiddle").droppable({
            drop: function(event, ui) {
                $(ui.draggable).detach().css({
                    top: 0,
                    left: 0
                }).appendTo(this)
               
                var middleNumber = $.trim(ui.draggable.text());
            }
        });
              


        $(".dropRight").droppable({
            drop: function(event, ui) {
                $(ui.draggable).detach().css({
                    top: 0,
                    left: 0
                }).appendTo(this);

                var rightNumber = $.trim(ui.draggable.text());
            }
        });
    });