Multiple choice table - Discrete choice Models

<script type="text/javascript" charset="utf-8">
	$(document).on('ready pjax:scriptcomplete',function(){
		var columnCount = $('#question{QID} table.subquestion-list thead tr:eq(0) > *').length;
		$('#question{QID} table.subquestion-list').addClass('custom-array-1');
		$('#question{QID} .no-more-tables').removeClass('no-more-tables');
		$('#question{QID} .answer-item .visible-xs-block.label-text').remove();
		$('#question{QID} table.subquestion-list thead tr:eq(0)').hide();
		$('#question{QID} table.subquestion-list thead').append('<tr class="inserted-row"><td colspan='+columnCount+'></td></tr>');
		$('#question{QID} table.subquestion-list .inserted-row td:eq(0)').html($('#question{QID} th.answertext:eq(0)').html());
		$('#question{QID} th.answertext:eq(0)').html('');
	});
</script>

table.custom-array-1 .inserted-row td {
	text-align: center;
	padding: 0;
}
 
table.custom-array-1 .inserted-row img {
	width: 100%;
}

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
	<tbody>
		<tr>
			<td style="text-align: center;" width="0%"> </td>
			<td style="text-align: center;" width="0%"> </td>
			<td bgcolor="#D4D7E4" style="text-align: center;" width="40%"><br />
			<span style="font-size:24px;"><strong>BANANAS</strong></span><br />
			 </td>
			<td style="text-align: center;" width="0%"> </td>
			<td bgcolor="#D4D7E4" style="text-align: center;" width="40%"><span style="font-size:24px;"><strong>GREEN APPLES</strong></span></td>
		</tr>
		<tr style="height: 6px; text-align: center;">
		</tr>
		<tr>
			<td bgcolor="#f2f2f2" style="text-align: center;">
			<p><span style="font-size:12px;"> </span><br />
			<span style="font-size:18px;">Type of Vitamins</span><span style="font-size:12px;"> </span></p>
			</td>
			<td style="text-align: center;" width="0%"> </td>
			<td bgcolor="#f2f2f2" style="text-align: center;">
			<p> </p>
 
			<div><span style="font-size:20px;"><strong>XX</strong></span></div>
 
			<p> </p>
			</td>
			<td style="text-align: center;" width="0%"> </td>
			<td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:20px;"><strong>XXXX</strong></span></td>
		</tr>
		<tr style="height: 6px; text-align: center;">
		</tr>
		<tr>
			<td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:18px;">Hidratos</span></td>
			<td style="text-align: center;" width="0%"> </td>
			<td bgcolor="#f2f2f2" style="text-align: center;">
			<p><span style="font-size:20px;"><strong>SUGAR</strong></span><br />
			<br />
			<span style="font-size:16px;">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla .</span></p>
			</td>
			<td style="text-align: center;" width="0%"> </td>
			<td bgcolor="#f2f2f2">
			<p style="text-align: center;"><span style="font-size: 20px;"><b>ACID JUICE</b></span><br />
			<span style="font-size:16px;">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla  bla bla bla bla bla bla blabla .</span></p>
			</td>
		</tr>
		<tr>
			<td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:18px;">Price</span></td>
			<td style="text-align: center;" width="1%"> </td>
			<td bgcolor="#f2f2f2" style="text-align: center;"><br />
			<b>1 Kg - 1€</b><br />
			 </td>
			<td style="text-align: center;" width="1%"> </td>
			<td bgcolor="#f2f2f2" style="text-align: center;"><strong>1Kg - 0.95 €</strong></td>
		</tr>
		<tr style="height: 6px; text-align: center;">
			<td colspan="5"></td>
		</tr>
		<tr>
			<td bgcolor="#f2f2f2" style="text-align: center;"></td>
			<td style="text-align: center;" width="0%"> </td>
			<td bgcolor="#f2f2f2" style="text-align: center;"></td>
			<td style="text-align: center;" width="0%"> </td>
			<td bgcolor="#f2f2f2"></td>
		</tr>
	</tbody>
</table>
<script type="text/javascript" charset="utf-8">
 
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Move the radios
		$('.question-text table:eq(0) tr:last td:eq(2)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(0) *', thisQuestion));
		$('.question-text table:eq(0) tr:last td:eq(4)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(1) *', thisQuestion));
 
		// Some classes for presentation
		$('.question-text table:eq(0) input:radio', thisQuestion).closest('td').addClass('answer-item radio-item text-center radio');
		$('.question-text table:eq(0) .radio-item label', thisQuestion).show();
 
		// Click event on the table cells
		$('.question-text table:eq(0) .radio-item', thisQuestion).on('click', function(e) {
			$('input:radio', this).trigger('click');
		});
		$('.question-text table:eq(0) input:radio', thisQuestion).on('click', function(e) {
			e.stopPropagation();
		});
 
		// Clean-up styles
		$('.answer-container', thisQuestion).hide();
		$('.question-text table:eq(0) .label-text', thisQuestion).remove();
		$('.question-text table:eq(0) .radio-text', thisQuestion).css({
			'cursor': 'pointer'
		});
    });
</script>