title: Codeigniter: Bootstrap Modal with table data
body: <p>I have a table of data populated using a foreach loop like below:</p>
  
  <pre><code>&lt;table class="table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th scope="col"&gt;#&lt;/th&gt;
            &lt;th scope="col"&gt;Keyboard Language&lt;/th&gt;
            &lt;th scope="col"&gt;PC Spec&lt;/th&gt;
            &lt;th scope="col"&gt;Desk Position&lt;/th&gt;
            &lt;th scope="col"&gt;Price Per Hour&lt;/th&gt;
            &lt;th scope="col"&gt;Hours&lt;/th&gt;
            &lt;th scope="col"&gt;Total Price&lt;/th&gt;
            &lt;th scope="col"&gt;Confirm&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;?php $increment =1; ?&gt;
          &lt;!--print each item in a new row on the table --&gt;
          &lt;?php foreach($bookingData as $booking_item) { ?&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;?php echo $increment ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php echo $booking_item['item']; ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php echo $booking_item['item1']; ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php echo $booking_item['item2']; ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php echo '£ '. $booking_item['item3']; ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php echo $userEntered['item4']; ?&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php echo '£ '.$userEntered['item5'] * $booking_item['item6']; ?&gt;&lt;/td&gt;
            &lt;?php $totalPrice = $userEntered['item7'] * $booking_item['item7'];?&gt;
              &lt;td&gt;&lt;button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter&lt;?php echo $increment; ?&gt;"&gt;&lt;i class="fa fa-calendar-check" style="color: white;"&gt;&lt;/i&gt;Book now!&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;?php $increment++; } ?&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I have button in each table row, I want to create a modal that pops up to ask the user to confirm the action using the modal code below:</p>
  
  <pre><code>&lt;div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="exampleModalLongTitle"&gt;Modal title&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;?php echo $booking_item['item1']?&gt;
          &lt;?php echo $booking_item['item2']?&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Confirm Booking!&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I'm stumped as to how to load each row of data into the modal for each table row, I have done this before in another project but I can't for the life remember how to replicate it</p>