title: Easy way to display a new panel with dynamic content
body: <p>I am trying to come up with the best (easiest) way to implement a sort panel slide out when a link is clicked.... </p>
  
  <p>Basically there is a series of divs and I would like each one to slide out a panel from the right allowing information to be added and then saved, this will then slide the panel away...</p>
  
  <p>The current information is displayed (working) in the below code.  This displays 4 columns while on a PC and only 2 on a phone, which is what I would like to keep.</p>
  
  <p>The premise being that if you click on Engine 1 or Engine 2 (or the actual database 'pull', then you get a page overlay that allows you to fill in a form and submit it.</p>
  
  <p>I could just load another data input page, but thought this would be a bit more elegant.</p>
  
  <p>The reason for the panel half way down was that I was experimenting.  Naming panels...  </p>
  
  <pre><code>        &lt;div class="container"&gt;
              &lt;h2&gt;&lt;/h2&gt;
              &lt;div class="row"&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;Vessel Information for &lt;?php echo $vesseldata['vesselTag']?&gt;&lt;/div&gt;
                          &lt;div class="panel-body" &gt;
                                                      &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;b&gt;Vessel Details&lt;/b&gt;&lt;/div&gt;
                                                      &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Type of Vessel&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $basespec['newname'];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Design Reference&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['DesignRef'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Ordering Dealer&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $OrderingDealer= array_column($OrderingDealers, 'name', 'id'); echo $OrderingDealer[$vesseldata['OrderingDealer']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Hull Number&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['HullNo'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Hull Colour&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['HullColour'];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Topside Colour&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['TopsideColour'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                       &lt;div class="row"&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;b&gt;Build Dates&lt;/b&gt;&lt;/div&gt;
                                                      &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Build Complete&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['BuildDate'];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Commission Complete&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['CommissionDate'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                  &lt;/div&gt;
                          &lt;div class="panel-body"&gt;
                                                      &lt;div class="row"&gt;&lt;div&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;b&gt;Build Options&lt;/b&gt;&lt;/div&gt;
                                                      &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3" id="engine1"&gt;Engine 1&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Engine1Type']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Engine 1 Serial&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['Engine1Number'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Engine 2&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Engine2Type']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Engine 2 Serial&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['Engine1Number'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Stern Drive 1&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['SternDrive1Type']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Stern Drive 1 Serial&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['SternDrive1Number'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Stern Drive 2&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['SternDrive2Type']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Stern Drive 2 Serial&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['SternDrive2Number'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Generator&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Genset1Type']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Generator Serial&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['Genset1Number'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Air Conditioning&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Aircon1Type']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Air Conditioning Serial&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['Aircon1Number'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Teak Pack&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['TeakPack']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Teak Cork Batch&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php echo $vesseldata['TeakCorkBatch'];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row"&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Layout&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Layout']];?&gt;&lt;/div&gt;
                                                          &lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;Interior Décor&lt;/div&gt;&lt;div class="col-xs-6 col-sm-6 col-md-3"&gt;&lt;?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Interior']];?&gt;&lt;/div&gt;
                                                          &lt;/div&gt;
  
  
  
  
                                                      &lt;/div&gt;
  
                                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;```
  </code></pre>