@foreach ($questions as $key => $question)
  <div class="form-group row questionRow" style='margin: 20px 0;'>
    <div class='col-lg-12'>
      <label style='color: blue;'>{{ $key + 1 }}. Question:</label>
      <textarea class='form-control cache_description' id="question_{{ $key }}" name='addQuestions[{{ $key }}][question]'>
        {{ $question->question }}
      </textarea>
    </div>
    <div class='col-lg-6 col-md-6 col-sm-6 col-xs-10'>
      <label>Option 1:</label>
      <textarea class='form-control cache_options' id="question_{{ $key }}_option_1" name='addQuestions[{{ $key }}][option_1]'>
        {{ $question->option_1 }}
      </textarea>
    </div>
    <div class='col-lg-6 col-md-6 col-sm-6 col-xs-10'>
      <label>Option 2:</label>
      <textarea class='form-control cache_options' id="question_{{ $key }}_option_2" name='addQuestions[{{ $key }}][option_2]'>
        {{ $question->option_2 }}
      </textarea>
    </div>
    <div class='col-lg-6 col-md-6 col-sm-6 col-xs-10'>
      <label>Option 3:</label>
      <textarea class='form-control cache_options' id="question_{{ $key }}_option_3" name='addQuestions[{{ $key }}][option_3]'>
        {{ $question->option_3 }}
      </textarea>
    </div>
    <div class='col-lg-6 col-md-6 col-sm-6 col-xs-10'>
      <label>Option 4:</label>
      <textarea class='form-control cache_options' id="question_{{ $key }}_option_4" name='addQuestions[{{ $key }}][option_4]'>
        {{ $question->option_4 }}
      </textarea>
    </div>
    <div class='col-lg-4 col-md-4 col-sm-6 col-xs-10'>
      <label>Answer:</label>
      <select class='form-control questionAnswer' name='addQuestions[{{ $key }}][answer]'>
        <option value="">Select answer</option>
        <option value='1' {{ $question->answer == '1' ? 'selected' : '' }}>Option 1</option>
        <option value='2' {{ $question->answer == '2' ? 'selected' : '' }}>Option 2</option>
        <option value='3' {{ $question->answer == '3' ? 'selected' : '' }}>Option 3</option>
        <option value='4' {{ $question->answer == '4' ? 'selected' : '' }}>Option 4</option>
      </select>
    </div>
    <div class='col-lg-4'>
      <button type='button' class='btn btn-danger removeQuestionRow' style='margin-top: 25px;'>Remove</button>
    </div>
  </div>
@endforeach

<div class="form-group">
  <button class="btn btn-info updateQuestionFromCache" type="button">Update and continute</button>
  <button class="btn btn-primary">Submit</button>
</div>

<script>
$(".cache_description").each(function() {
  var editorId = $(this).attr('id');

  CKEDITOR.replace(editorId, {
    toolbar: [
      { name: 'clipboard', items: [ 'Paste', 'PasteText', 'PasteFromWord' ] },
      { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike' ] },
      { name: 'paragraph', items: [  'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
      { name: 'insert', items: [ 'Table', 'Image' ] },
      { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Mathjax'  ] },
      { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
    ],
    mathJaxLib: "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML"
  });
});

$(".cache_options").each(function() {
  var editorId = $(this).attr('id');

  CKEDITOR.replace(editorId, {
    extraPlugins: 'mathjax',
    mathJaxLib: "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML",
    toolbar: [
      { name: 'clipboard', items: [ 'Paste', 'PasteText', 'PasteFromWord'] },
      { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Mathjax'  ] },
      { name: 'insert', items: [ 'Table', 'Image' ] }
    ],
    height: '70px'
  });
});

CKEDITOR.config.extraPlugins = 'mathjax';
</script>