Passing PHP value to a modal box : I want to pass a variable to a modal box I call on the same page but have not been able to do it. 

Code to open modal box is as below 

    <li style="font-style:bold" title="rate on skill" class="skill_rating"><a data-toggle="modal" title="Add this item" class="open-AddBookDialog" href="#addBookDialog" data-id='<?php echo $skill_id2[$q]?>'><i class="fa fa-anchor" aria-hidden="true"></i>  </a><?php echo $skilltemp2[$q2] ?></li>


Modal Box code as below

    <div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="addBookDialog"><div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Search</h4>    
                </div>
                <div class="modal-body">
                    <div class="form-group">
                    <input type="text" name="bookId" id="bookId" value=""/>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"><span>Search</span></button>
                </div>
            </div>
        </div>
</div>


Javascript before the closing body tag is as below

    <script type="text/javascript">
    $(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
          });
     </script>
I saw a couple of answers at stackoverflow (example:http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal )but I have not been able to customize it for my requirement.

Pardon me if its is too simple. I am a noob