How to change the date and time depending upon the timezone selected?

Question

dispalys the timezone in dropdown ....... bootstrap datetimepicker I have one dropdown in which all the time zones are displayed. I have one bootstrap datetimepicker. onselect of time zone in first dropdown, the date and time in datetimepicker need to change depending upon the timezone selected.

The code for datetimepicker

<div class="form-group">

  <div class='input-group date' id='datetimepicker5'>
    <input type='text' class="form-control"   placeholder="start-date" required />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>

  <script type="text/javascript">
    $(function () {
      $('#datetimepicker5').datetimepicker({
        defaultDate: moment(),
        widgetPositioning:{
          horizontal: 'auto',
          vertical: 'top'
        }
      });
    });
  </script>

</div>

This is the code for displaying the timezone

<div class="form-group">
  <select class="form-control"  id="shiftroster_timezone"  required>
    <option value=" "> select timezone</option>
    {% for table in zoned_array %}
    {% set selected = '' %}
    {% if (table.zone ~ ' ' ~ table.diff_from_GMT) == services_names %}
    {% set selected = 'selected' %}
    {% endif %}
    <option value="{{table.diff_from_GMT}}" {{ selected }}>  {{table.zone}} {{table.diff_from_GMT}}</option>
    var_dump{{table.diff_from_GMT}};
    {% endfor %}
  </select>
</div>

PHP code for displaying the timezone

$zones_array = array();
$timestamp = time();
foreach(timezone_identifiers_list() as $key => $zone) {
  date_default_timezone_set($zone);
  $zones_array[$key]['zone'] = $zone;
  $zones_array[$key]['diff_from_GMT'] = 'UTC/GMT ' . date('P', $timestamp);
}