how to add mouse event to set of divs and load data from database form click div?

Question

I am doing project using Laravel 5. I make set of div according to some dynamic number. This is it out put.

This is code for creating above graphic.

 <section class="content">   
        <div class="box box-warning" align="center">
            <div class="gap">
                <div class="box-body">                
                    @foreach($rooms as $room)
                    @if($room->roomState === 'Available')
                    <div  id='divelementone' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:yellowgreen;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div>
                    @elseif ($room->roomState === 'UnAvailable')
                    <div  id='divelementtwo' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:red;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div>
                    @elseif ($room->roomState === 'notCheckIn')
                    <div  id='divelementthree' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:yellow;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div>   

                    @endif
                    @endforeach
                </div>
            </div>
        </div><!-- /.box --> 
</section><!-- /.content -->

now I want to attach every div(square) elements to mouse click event. when mouse over the div , change mouse pointer and get some database value specific id and also, I want to view that value in tool tip or some suitable panel over the div(Square).

I try using JavaScript to attach mouse click event ,but it work only with first div(square).

I am new comer to web development so , I haven't knowledge ,how to handle this requirement. please , expect some expert help as soon as possible.

Note : My main purpose is attach mouse click events to every div and load datafrom db and view them tooltip or optionpane.

Answer 1

Try this:

Attach JavaScript onclick() event to every div.

In View(blade)

<div class="box-body">                
      @foreach($rooms as $room)
       @if($room->roomState === 'Available')
         <div onclick="divClick('Available', {{$room->room_code}})" id='divelementone' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:yellowgreen;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div>
       @elseif ($room->roomState === 'UnAvailable')
         <div onclick="divClick('UnAvailable', {{$room->room_code}})" id='divelementtwo' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:red;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div>
       @elseif ($room->roomState === 'notCheckIn')
         <div onclick="divClick('notCheckIn', {{$room->room_code}})" id='divelementthree' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:yellow;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div>   
       @endif
      @endforeach    
</div>

In JavaScript

<script type="text/javascript">
  function divClick(roomState, roomCode)
  {
    // Your code here
    // Ajax code for fetching data from DB


    // Alert the passed room code like this
    window.alert(roomCode);
  }
</script>

To change mouse pointer use CSS styling div:hover { cursor:pointer; }. Also it would a best practice to link a separate CSS file for the div styling.

Hope this is helpful.