<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects
    $('.answer-item.answer_cell_X005', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
              <option value="">...</option>\
            <option value="1">increase</option>\
            <option value="2">stay the same</option>\
            <option value="3">decrease</option>\
    </select>');  
 
    // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
 
  // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
      // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
    
    // Set the first two columns to readonly
    $('.answer-item:nth-child(2) input:text', thisQuestion).prop('readonly', true);
    $('.answer-item:nth-child(3) input:text', thisQuestion).prop('readonly', true);
 
  });
</script>

<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
    // Insert the column categories
    $('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
    $('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
      <td rowspan="2" colspan="1" style="border-top:0 !important;font-weight:bold;padding-top:30px;">Products</td>\
      <th class="answer-text inserted-header" colspan="2">14.7.2021</th>\
      <th class="answer-text inserted-header" colspan="2">21.7.2021</th>\
      <th class="answer-text inserted-header" colspan="1">Trends</th>\
    </tr>');
    });    
</script>

<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
  });
</script>

<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
  .custom-array table.subquestion-list thead .column-0 {  width: 20%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 20%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 20%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 40%; }
</style>