individual modal window pop up followed by default modal window after >1 click

I want to create clickable text that display a model/alert in bootstrap. Each item has there on specific alert on the first click but >=0 there will be a default modal value that says you clicked this already. after each element is clicked the user gets moved over to another page

<div id="b1" class="mybox">One </div>
<div id="b2" class="mybox">Two </div>
<div id="b3" class="mybox">Three </div>
<div id="b4" class="mybox">Four  </div>
  var Boxes = [];
    var ttle = $('.mybox').length;
    $('.mybox').click(function () {

        var bx = this.id;
       if (Boxes.indexOf(bx) >= 0){
           alert('You Already Found Object ');
       }else{
          document.getElementById("b1").innerHTML = ("YOU CLICKED b1!");
           document.getElementById("b2").innerHTML = ("YOU CLICKED b2!");
            document.getElementById("b3").innerHTML = ("YOU CLICKED b3!");
           document.getElementById("b4").innerHTML = ("YOU CLICKED b4!");
           ;
            //alert("hey you found" );
            Boxes.push(bx);
       }

        if (Boxes.length ==ttle)
            window.location = "#/finishedgame";
    }); 

I tried making this in bootstrap js modals but I get stuck on how I am suppose to first alert is suppose to be called.

<!--<div id="b1" class="mybox">One</div>
<div id="b2" class="mybox">Two</div>
<div id="b3" class="mybox">Three </div>
<div id="b4" class="mybox"> Four</div>





    <!-- Trigger the modal with a button -->
    <button type="button" class="mybox btn btn-info btn-md"   id="myBtn">Toggle Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal"  role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal </h4>
                </div>
                <div class="modal-body">
                    <p>The toggle </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

<!-- Trigger the modal with a button -->
<button type="button" class="mybox btn btn-info btn-md"  id="myBtns">Toggle </button>

<!-- Modal -->
<div class="modal fade" id="myModals" class="box" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Test</h4>
            </div>
            <div class="modal-body">
                <p>Test</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>






<script type="text/javascript">

    //document.getElementById("b2").onclick = function () { myFunction() };


    //var Boxes = [];
    //var ttle = $('.mybox').length;
    //$('.mybox').click(function () {

    //    var bx = this.id;
    //    if (Boxes.indexOf(bx) >= 0){
    //        alert('You Already Found Object ');
    //    }else{
    //        document.getElementById("b1").innerHTML = ("YOU CLICKED b1!");
    //        document.getElementById("b2").innerHTML = ("YOU CLICKED b2!");
    //        document.getElementById("b3").innerHTML = ("YOU CLICKED b3!");
    //        document.getElementById("b4").innerHTML = ("YOU CLICKED b4!");
    //        document.getElementById("b5").innerHTML = ("YOU CLICKED b5!");
    //        //alert("hey you found" );
    //        Boxes.push(bx);
    //    }

    //    if (Boxes.length ==ttle)
    //        window.location = "#/finishedgame";
    //});

    var Boxes = [];
    var ttle = $('.mybox').length;

    $('.mybox').click(function () {

       var bx = this.id;
       if (Boxes.indexOf(bx) >= 0){
           $(document).ready(function () {
               $("#myBtn").click(function () {
                   $("#myModal").modal("toggle");
               });
           });

           $(document).ready(function () {
               $("#myBtns").click(function () {
                   $("#myModals").modal("toggle");
               });
           });

       }else{

           alert("hey you found" );
          Boxes.push(bx);
        }

      if (Boxes.length ==ttle)

    });






</script>

Any help is very much appreciated!