title: How to make time slot multi select based on specefic service
body: <p>I need your help with the following issue. I'm New in PHP and I'm building a booking Calendar for a website that makes user book service, my website is a spa website, so my task is to make a calendar with time slots, I made the calendar and time slots, <em><strong>The problem is how to make the time slots multi selectable based on specific service.</strong></em><br />
  For Example, I have three services:</p>
  <ol>
  <li>service 1</li>
  <li>service 2</li>
  <li>service 3</li>
  </ol>
  <p>if the user selects <strong>service 1</strong> for example, can book a <strong>single slot time</strong> for 3 or 4 times, and so on in other services.</p>
  <p>I hope that I explained my problem.</p>
  <p>Here is my Code for Time Slots and the output:</p>
  <pre><code>&lt;?php
      if (isset($_GET['date'])) {
          $date = $_GET['date'];
      }
  
  
      // Making Timelots &gt;&gt; Part 3
      $duration = 90;
      $cleanup = 30;
      $start = &quot;10:00&quot;;
      $end = '24:00';
  
      function timeslots($duration, $cleanup, $start, $end)
      {
          $start = new DateTime($start);
          $end = new DateTime($end);
          $interval = new DateInterval('PT' . $duration . 'M');
          $cleanupinterval = new DateInterval('PT' . $cleanup . 'M');
          $slots = array();
  
          for ($intStart = $start; $intStart &lt; $end; $intStart-&gt;add($interval)-&gt;add($cleanupinterval)) {
              $endperiod = clone $intStart;
              $endperiod-&gt;add($interval);
              if ($endperiod &gt; $end) {
                  break;
              }
              $slots[] = $intStart-&gt;format('H:iA') . '-' . $endperiod-&gt;format('H:iA');
          }
  
          return $slots;
      }
  
      ?&gt;
      &lt;!doctype html&gt;
      &lt;html lang=&quot;en&quot;&gt;
  
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot; integrity=&quot;sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z&quot; crossorigin=&quot;anonymous&quot;&gt;
          &lt;style&gt;
              @media only screen and (max-width: 760px),
              (min-device-width: 802px) and (max-device-width: 1020px) {
  
                  /* Force table to not be like tables anymore */
                  table,
                  thead,
                  tbody,
                  th,
                  td,
                  tr {
                      display: block;
  
                  }
  
                  .empty {
                      display: none;
                  }
  
                  /* Hide table headers (but not display: none;, for accessibility) */
                  th {
                      position: absolute;
                      top: -9999px;
                      left: -9999px;
                  }
  
                  tr {
                      border: 1px solid #ccc;
                  }
  
                  td {
                      /* Behave  like a &quot;row&quot; */
                      border: none;
                      border-bottom: 1px solid #eee;
                      position: relative;
                      padding-left: 50%;
                  }
  
  
  
                  /*
      Label the data
      */
                  td:nth-of-type(1):before {
                      content: &quot;Sunday&quot;;
                  }
  
                  td:nth-of-type(2):before {
                      content: &quot;Monday&quot;;
                  }
  
                  td:nth-of-type(3):before {
                      content: &quot;Tuesday&quot;;
                  }
  
                  td:nth-of-type(4):before {
                      content: &quot;Wednesday&quot;;
                  }
  
                  td:nth-of-type(5):before {
                      content: &quot;Thursday&quot;;
                  }
  
                  td:nth-of-type(6):before {
                      content: &quot;Friday&quot;;
                  }
  
                  td:nth-of-type(7):before {
                      content: &quot;Saturday&quot;;
                  }
  
  
              }
  
              /* Smartphones (portrait and landscape) ----------- */
  
              @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
                  body {
                      padding: 0;
                      margin: 0;
                  }
              }
  
              /* iPads (portrait and landscape) ----------- */
  
              @media only screen and (min-device-width: 802px) and (max-device-width: 1020px) {
                  body {
                      width: 495px;
                  }
              }
  
              @media (min-width:641px) {
                  table {
                      table-layout: fixed;
                  }
  
                  td {
                      width: 33%;
                  }
              }
  
              .row {
                  margin-top: 20px;
              }
  
              .today {
                  background: yellow;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;h1 class=&quot;text-center&quot;&gt;Book for Date: &lt;?php echo date('m/d/Y', strtotime($date)); ?&gt;&lt;/h1&gt;
              &lt;hr&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;!-- part 4 --&gt;
                  &lt;div class=&quot;col-md-12&quot;&gt;
                      &lt;?php echo isset($msg) ? $msg : ''; ?&gt;
                  &lt;/div&gt;
                  &lt;!-- Part 3 --&gt;
                  &lt;?php
                  $timesolts = timeslots($duration, $cleanup, $start, $end);
                  foreach ($timesolts as $ts) {
                  ?&gt;
                      &lt;div class=&quot;col-2&quot;&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;button class=&quot;btn btn-success book&quot; data-timeslot=&quot;&lt;?php echo $ts; ?&gt;&quot;&gt;&lt;?php echo $ts; ?&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;?php } ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Modal Part 4 --&gt;
          &lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot; role=&quot;dialog&quot;&gt;
              &lt;div class=&quot;modal-dialog&quot;&gt;
                  &lt;!-- Modal content--&gt;
                  &lt;div class=&quot;modal-content&quot;&gt;
                      &lt;div class=&quot;modal-header&quot;&gt;
                          &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
                          &lt;h4 class=&quot;modal-title&quot;&gt;Booking: &lt;span id=&quot;slot&quot;&gt;&lt;/span&gt;&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;modal-body&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;
                              &lt;div class=&quot;col-md-12&quot;&gt;
                                  &lt;form action=&quot;&quot; method=&quot;POST&quot;&gt;
                                      &lt;div class=&quot;form-group&quot;&gt;
                                          &lt;label for=&quot;&quot;&gt;Time Slot&lt;/label&gt;
                                          &lt;input required type=&quot;text&quot; readonly name=&quot;timeslot&quot; id=&quot;timeslot&quot; class=&quot;form-control&quot;&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;form-group&quot;&gt;
                                          &lt;label for=&quot;&quot;&gt;services&lt;/label&gt;
                                          &lt;input required type=&quot;text&quot; readonly name=&quot;service&quot; id=&quot;service&quot; class=&quot;form-control&quot;&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;form-group&quot;&gt;
                                          &lt;label for=&quot;name&quot;&gt;Name&lt;/label&gt;
                                          &lt;input required type=&quot;text&quot; name=&quot;name&quot; class=&quot;form-control&quot;&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;form-group&quot;&gt;
                                          &lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;
                                          &lt;input required type=&quot;email&quot; name=&quot;email&quot; class=&quot;form-control&quot;&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;form-group pull-right&quot;&gt;
                                          &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot; name=&quot;submit&quot;&gt;Submit&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          &lt;script&gt;
              $(function() {
                  'use strict';
                  $('.book').click(function() {
                      var timeslot = $(this).attr('data-timeslot');
                      $('#slot').html(timeslot);
                      $('#timeslot').val(timeslot);
                      $('#myModal').modal('show');
                  });
              });
          &lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  <p>and the output is like this:
  <img src="https://i.stack.imgur.com/Wcw4N.png" alt="view this image" /></p>
  <p>How to solve this problem?</p>