Need to assign unique ID to div in PHP file

Question

I'm outputting a calendar which will ultimately appear as a series of buttons for the end user. Each button will have the name of the event. When you tap on a button, it will toggle down to show you a short description and the date/time for the event.

So far I've got all the event buttons to show. However, when you click on any button, only the very top event's description and date/time show. What I need help with then is figuring out how to assign each event instance a unique div ID. I tried some other examples on here, but because the following code is written in PHP, just creating a var = blank; throws a processing error.

  public function event_block($title, $desc, $start, $end, $where = NULL, $img = NULL, $span = 6)
{
$start_arr = date_parse($start);
$start_stamp = mktime($start_arr['hour'], $start_arr['minute'], $start_arr['second'],    $start_arr['month'], $start_arr['day'], $start_arr['year']);
$start_date_int = date('Ymd', $start_stamp);

$end_arr = date_parse($end);
$end_stamp = mktime($end_arr['hour'], $end_arr['minute'], $end_arr['second'], $end_arr['month'], $end_arr['day'], $end_arr['year']);
$end_date_int = date('Ymd', $end_stamp);

$today_date_int = date('Ymd');

$time_range = date('g:i a', $start_stamp) . ' to ' . date('g:i a', $end_stamp);


if ($start_date_int == $today_date_int) {
  $date = 'Today';
  if ($start_date_int < $end_date_int) {
    $time_range = 'Until ' . date('l, F jS', $end_stamp);
  }
} else {
  $date = date('l, F jS', $start_stamp);
  if ($start_date_int < $end_date_int) {
    $time_range = 'From' . date('l, F jS', $start_stamp) . ' through ' . date('l, F jS', $end_stamp);
  }
}


$output = '

    <!-- Event Block -->
    <div class="span' . $span . ' event">
    <div class="panel-group id="accordion">
      <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#addMore" class="btn btn-primary btn-lg">' . $title . '</a>';

if (trim($desc) && $date == 'Today') {
  $output .=  '<div id="addMore" class="panel-collapse collapse">
        <div class="panel-body">' .  trim($desc) .  '</div>';
}
$output .= '<p style="padding-left: 5px;">';
if (trim($desc) && $date != 'Today') {
  $output .= '<div id="addMore" class="panel-collapse collapse"> 
  <div class="panel-body">' .trim($desc) . '</div>';
  $output .= '<span style="color: #E8D0A9;">Date:</span> ' . $date . '<br />';
}
$output .= '<span style="color: #E8D0A9;">Time:</span> ' . $time_range . '</p></div>';

return $output;

}

This is the helpful post I looked at before: Create Dynamic div with unique IDs - jQuery

Below is the code on my calendar.php which uses the data from above to generate the calendar of events:

<?php

            error_reporting(E_ALL); 
            ini_set('display_errors', TRUE); 
            ini_set('display_startup_errors', TRUE);

                require_once('include/event_signage.php');
                $sign = new Signage;

                // Collect and format all the data

                $hero_content = array(
                  'heading' => '',
                  'text'    => '',
                );

                $events_now_arr = $sign->databoard_get('URL');
                $events_today_arr = $sign->databoard_get('URL');
                $events_week_arr = $sign->databoard_get('URL');

                // Build the sign
                $signage = $sign->header();
                //$signage .= $sign->masthead($masthead_content);
                $signage .= '<div class="container-fluid"> <!-- container -->';

                $signage .= $sign->hero_unit($hero_content);
                $event_ids = array();

                // Happnening Now
                if (count($events_now_arr)) {
                  $signage .= '<div><h2>Right now!</h2></div>';
                  foreach ($events_now_arr as $events_arr) {
                    if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community') {
                      $blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end']);
                    }
                    $event_ids[] = $events_arr['id'];
                  }
                  $signage .= $sign->gather_blocks($blocks);
                  unset($blocks);
                }

                // Happening today
                if (count($events_today_arr)) {
                  $signage .= '<div><h2>Today</h2></div>';
                  foreach ($events_today_arr as $events_arr) {
                    if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community') {
                    $blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end']);
                    }
                    $event_ids[] = $events_arr['id'];
                  }
                  $signage .= $sign->gather_blocks($blocks);
                  unset($blocks);
                }


                // Happening this week
                if (count($events_week_arr)) {
                  $current_hour = date('G');
                  $cutoff = 39;
                  if ($current_hour <= 16) {
                    $cutoff = 27;
                    if ($current_hour <= 14) { $cutoff = 24; }
                    if ($current_hour <= 13) { $cutoff = 21; }
                    if ($current_hour <= 12) { $cutoff = 18; }
                    if ($current_hour <= 10) { $cutoff = 15; }
                  }

                  $signage .= '<div><h2>This Week</h2></div>';
                  $i = 0;
                  foreach ($events_week_arr as $events_arr) {
                    if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community' && $i < $cutoff) {
                      $blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end'], NULL, NULL, 4);
                      $i++;
                    }
                    $event_ids[] = $events_arr['id'];
                  }

                  $signage .= $sign->gather_blocks($blocks, 3);
                  unset($blocks);
                }

                $signage .= '</div> <!-- /container -->';
                $signage .= $sign->footer();



                // Output the sign

                print $signage;
                ?>

Answer 1

You're going about it wrong. You don't really need to assign a unique id to any of the divs. You just need some standard DOM operations. e.g

<div>
   calendar entry #1
   <div>more information that's hidden for entry #1</div>
   <button onclick="showMore(this);">click here for more</button>
</div>
<div>
   calendar entry #2
   <div>more information that's hidden for entry #2</div>
   <button onclick="showMore(this);">click here for more</button>
</div>

Since every element in the DOM KNOWS where it is in the tree, you don't need a specific ID on that first container div, you just need to know which button got clicked on, which is why this is being passed into the showMore() function:

function showMore(obj) {
    obj.previousSibling().style.display = 'block'; // the more info div
}

Of course, this code isn't particularly "portable". it assumes the "more info" div is always going to be right next to the "toggle" button, but this should be enough to give you the general idea.