<script type="text/javascript" charset="utf-8">    
  $(document).ready(function(){ 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign some classes and attributes
    thisQuestion.addClass('variable-length-text-array');
    $('table.subquestions-list tr', thisQuestion).each(function(i){
      $('> *', this).each(function(i){
        $(this).addClass('column-'+i+'');
        $(this).attr('data-column', i);
      });
    });
    $('table.subquestions-list tr.subquestion-list td.column-4', thisQuestion).addClass('count female');
    $('table.subquestions-list tr.subquestion-list td.column-5', thisQuestion).addClass('count male');
    $('table.subquestions-list tr.subquestion-list td:last-child', thisQuestion).addClass('total row');  
    $('table.subquestions-list tr.subquestion-list:last', thisQuestion).addClass('totals');
 
    // 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.dynamic:visible', thisQuestion).length > 1) {
        $('.expandable-control.remove', thisQuestion).prop('disabled', false);
      }
      $('.expandable-control.add', thisQuestion).prop('disabled', false);
      if($('tr.subquestion-list.dynamic:visible', thisQuestion).length == $('tr.subquestion-list', thisQuestion).length) {
        $('.expandable-control.add', thisQuestion).prop('disabled', true);
      }
    }
 
    function clearRows() {
      $('tr.subquestion-list.hidden input:text, tr.subquestion-list.hidden select', thisQuestion).val('');
      columnTotals($('td.count.female:first'));
      columnTotals($('td.count.male:first'));
    }
 
    // Initially shown rows
    $('tr.subquestion-list:eq(0)', thisQuestion).addClass('dynamic shown');
    $('tr.subquestion-list:gt(0):not(:last)', thisQuestion).addClass('dynamic hidden');
    $('tr.subquestion-list.dynamic td:not(.total.row) 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();  
 
    // Readonly for totals
    $('table.subquestions-list td.total input[type="text"], table.subquestions-list tr.totals input[type="text"]', thisQuestion).prop('readonly', true);
 
    // Clean up the totals row
    $('tr.subquestion-list.totals td:not(.count):not(.total) input[type="text"]').val('N/A').hide();
 
    // Initial totals
    $('td.total.row input[type="text"], tr.subquestion-list.totals td.count input[type="text"]').each(function(i) {
      if($(this).val() == '') {
        $(this).val(0);
      }
    });
 
    // Listener on the count inputs
    $('table.subquestions-list td.count input[type="text"]', thisQuestion).on('change keyup', function(e) {
      // Row total
      var thisRow = $(this).closest('tr.subquestion-list');
      var thisCountFemale = Number($('td.count.female input[type="text"]', thisRow).val());
      if(isNaN(thisCountFemale)) {
        thisCountFemale = 0;
      }
      var thisCountMale = Number($('td.count.male input[type="text"]', thisRow).val());
      if(isNaN(thisCountMale)) {
        thisCountMale = 0;
      }
      $('td.total input[type="text"]', thisRow).val(thisCountFemale + thisCountMale);
 
      // Column total
      columnTotals(this);
    });
 
    function columnTotals(el) {
      var thisColumn = $(el).closest('td').attr('data-column');
      var colTotal = 0;
      $('tr.subquestion-list:not(.totals) td[data-column="'+thisColumn+'"] input[type="text"]').each(function(i) {
        var thisVal = Number($(this).val());
        if(!isNaN(thisVal)) {
          colTotal = colTotal + thisVal;
        }
      });
      $('tr.subquestion-list.totals td[data-column="'+thisColumn+'"] input[type="text"]').val(colTotal);
      $('tr.totals td.total input[type="text"]').val(Number($('tr.totals td.count.female input[type="text"]').val())+Number($('tr.totals td.count.male input[type="text"]').val()));
    }
    });
</script>