<script type="text/javascript" charset="utf-8">    
  $(document).ready(function(){
    variableLengthTextArray({QID});
  })
 
  function variableLengthTextArray(qID) {  
 
    var thisQuestion = $('#question'+qID);
    thisQuestion.addClass('variable-length-text-array');
 
    // Insert some styles
    $('<style type="text/css">\
      .hidden {\
        display: none !important;\
        visibility: hidden !important;\
      }\
      .expandable-control:disabled {\
      opacity: 0.3;\
      }\
    </style>').appendTo('head');
 
    // Insert the controls
    $('table.subquestions-list', thisQuestion).after('<div class="expandable-controls-wrapper">\
                              <button type="button" class="expandable-control remove">-</button>\
                              <button type="button" class="expandable-control add">+</button>\
                            </div>');
 
    // Click events
    $('.expandable-control.add', thisQuestion).click(function (event) {
      $('tr.subquestion-list.hidden:first', thisQuestion).removeClass('hidden').addClass('shown');
      handleArrayControls();
      $('.expandable-control', thisQuestion).blur();
    });
    $('.expandable-control.remove', thisQuestion).click(function (event) {
      $('tr.subquestion-list.shown:last', thisQuestion).removeClass('shown').addClass('hidden');
      clearRows();
      handleArrayControls();
      $('.expandable-control', thisQuestion).blur();
    });
 
    function handleArrayControls() {
      $('.expandable-control.remove', thisQuestion).prop('disabled', true);
      if($('tr.subquestion-list:visible', thisQuestion).length > 1) {
        $('.expandable-control.remove', thisQuestion).prop('disabled', false);
      }
      $('.expandable-control.add', thisQuestion).prop('disabled', false);
      if($('tr.subquestion-list:visible', thisQuestion).length == $('tr.subquestion-list', thisQuestion).length) {
        $('.expandable-control.add', thisQuestion).prop('disabled', true);
      }
    }
 
    function clearRows() {
      $('tr.subquestion-list.hidden input:text', thisQuestion).val('');
    }
 
    // Initially shown rows
    $('tr.subquestion-list:eq(0)', thisQuestion).addClass('shown');
    $('tr.subquestion-list:gt(0)', thisQuestion).addClass('hidden');
    $('tr.subquestion-list input:text', thisQuestion).filter(function () {return !!this.value;}).closest('tr.subquestion-list').addClass('answered-row');
    var thisQTable = $('table.subquestions-list', thisQuestion);
    var thisQRows = $('.answered-row', thisQuestion);
    var lastAnsweredRow = $('.answered-row:last', thisQuestion);
    var lastAnsweredIndex = $('tr.subquestion-list', thisQTable).index(lastAnsweredRow);
    $('tr.subquestion-list:lt('+(lastAnsweredIndex+1)+')', thisQuestion).removeClass('hidden').addClass('shown');
    handleArrayControls();
  }
</script>