How to loop through two "div" with different data on each?

Question

i am trying to build timeline feature in my web application, i have two different divs each with different data, i am trying to use foreach loop but it is not working as expected, can please anyone help me to achieve this , will be much appreciated

These are the two divs where i want the loo to be executed.

    <div class="row timeline-movement">
 <?php foreach ($events as $eve): ?>
    <div class="timeline-badge">
        <span class="timeline-balloon-date-day"><?php echo substr($eve->time,8, -8); ?></span>
        <span class="timeline-balloon-date-month " style="font-size: 20px;"><b><?php echo substr($eve->time,5, -12); ?></b></span>
    </div>

This is the first div

    <div class="col-sm-6  timeline-item">
        <div class="row">
            <div class="col-sm-11">
                <div class="timeline-panel credits">
                    <ul class="timeline-panel-ul">
                        <li><span class="importo"><?php echo $eve->title;?></span></li>
                        <li><span class="causale"><?php echo $eve->description;?></span> </li>
                        <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i><?php echo $eve->time;?></small></p> </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

This is the second div

    <div class="col-sm-6  timeline-item">
        <div class="row">
            <div class="col-sm-11">
                <div class="timeline-panel debits">
                    <ul class="timeline-panel-ul">
                        <li><span class="importo"><?php echo $eve->title;?></span></li>
                        <li><span class="causale"><?php echo $eve->description;?></span> </li>
                        <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i><?php echo $eve->time;?></small></p> </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
<?php endforeach ?>

This is the modal file for getting value from database

 public function view_timeline($id){

    $this->db->select("*"); 
  $this->db->from('timeline');
    $this->db->where('projectID' ,$id);
    $this->db->order_by("time", "DESC");
  //$this->db->join('client', 'client.Client_id = projects.Client_id');
  $query = $this->db->get();

  return $query->result();
 }

This is where i created $event variable to get values

    $data['events'] = $this->client_model->view_timeline($id);

My expected output will be like this bootsnip https://bootsnipp.com/snippets/ODzE

Answer 1

In a proper & consolidated way, Here you can use odd & even formula to get your expected output

<?php 
$i=1;
foreach ($events as $eve){
    if($i%2){ 
      $div_class = "credits";
    }else{
      $div_class = "debits";
    }
?>
<div class="col-sm-6  timeline-item">
        <div class="row">
            <div class="col-sm-11">
                <div class="timeline-panel <?php echo $div_class; ?>">
                    <ul class="timeline-panel-ul">
                        <li><span class="importo"><?php echo $eve->title;?></span></li>
                        <li><span class="causale"><?php echo $eve->description;?></span> </li>
                        <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i><?php echo $eve->time;?></small></p> </li>
                    </ul>
                </div>

            </div>
        </div>
 </div>
<?php $i++;} ?>