<style>
    .label-var{
        background: beige;
    }
    .label-var label{
        padding: 3px 0;
        margin-top: 5px;
    }
    .fontawesome-icon-list div{
        padding: 3px 0;
    }
</style>

<div class="row">
    <div class="col-md-12 label-var">
        <label for="">
            Dynamic Variable
        </label>
    </div>
</div>
<div class="row fontawesome-icon-list">
    <?php if(!empty($report_format_variables)){ ?>
     <?php foreach ($report_format_variables as $report_format_variable): ?>
            <div class="col-md-12 col-sm-12"><a href="#" title="Inject This Variable" onclick="placeVariable('[<?php echo $report_format_variable->variable_name; ?>]')"><i class="fa fa-fw fa-arrow-left"></i></a> <?php echo $report_format_variable->variable_name ?></div>
     <?php endforeach; } ?>
</div>
<div class="row">
    <div class="col-md-12 label-var">
        <label for="">
            Fixed Variable
        </label>
    </div>
</div>

<div class="row fontawesome-icon-list">
    <?php foreach (FIXED_REPORT_VARIABLE as $key => $value): ?>
     <div class="col-md-12 col-sm-12"><a href="#" title="Inject This Variable" onclick="placeVariable('[<?php echo $key; ?>]')"><i class="fa fa-fw fa-arrow-left"></i></a> <?php echo $key ?></div>
    <?php endforeach;?>
</div>

<script>
    function placeVariable(variable){
        event.preventDefault();
        tinymce.init({ selector:'textarea.editable' });
        tinymce.activeEditor.execCommand('mceInsertContent', false, variable);
    }
</script>