<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
tr:hover {
cursor: pointer;
background: rgba(255, 255, 100, 0.7);
}
tr.colRow:hover {
cursor: default;
background: initial;
}
</style>
</head>
<body>
<form id='main' action='https://httpbin.org/post?' method='post' target='response'>
<div class="table-responsive top">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Critility</th>
<th>Priority</th>
<th>Description</th>
<th>Date Submitted</th>
<th>Total Submittions</th>
</tr>
</thead>
<tbody>
<tr class="dropDown">
<td>1</td>
<td>Title 1</td>
<td>Do you mean: Criticality?</td>
<td>1</td>
<td>X</td>
<td>02-03-18</td>
<td>It's spelt: Submissions</td>
</tr>
<tr class="dropDown">
<td>2</td>
<td>Title 2</td>
<td>Do you mean: Criticality?</td>
<td>2</td>
<td>X</td>
<td>02-03-18</td>
<td>It's spelt: Submissions</td>
</tr>
<tr class="dropDown">
<td>3</td>
<td>Title 3</td>
<td>Do you mean: Criticality?</td>
<td>3</td>
<td>X</td>
<td>02-03-18</td>
<td>It's spelt: Submissions</td>
</tr>
<tr class="dropDown">
<td>4</td>
<td>Title 4</td>
<td>Do you mean: Criticality?</td>
<td>4</td>
<td>X</td>
<td>02-03-18</td>
<td>It's spelt: Submissions</td>
</tr>
<tr class="dropDown">
<td>5</td>
<td>Title 5</td>
<td>Do you mean: Criticality?</td>
<td>5</td>
<td>X</td>
<td>02-03-18</td>
<td>It's spelt: Submissions</td>
</tr>
</tbody>
</table>
</div>
</form>
<iframe name='response' src='about:blank' width='100%' height='250'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.dropDown').each(function(idx, tr) {
var formComp = `<fieldset> <legend>XYZ Questions</legend> <label class="radio-inline"> <input type="radio" name="optradio${idx}0" value='y'> <label>YES</label> </label> <label class="radio-inline left"> <input type="radio" name="optradio${idx}0" value='n'> <label>NO</label> </label> </fieldset> <fieldset> <legend>XYZ Questions</legend> <label class="radio-inline"> <input type="radio" name="optradio${idx}1" value='y'> <label>YES</label> </label> <label class="radio-inline left"> <input type="radio" name="optradio${idx}1" value='n'> <label>NO</label> </label> </fieldset><div class="checkbox" > <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button>`;
var newRow = $(`<tr class="colRow"><td colspan="7"><div id="panel_${idx}" class="dropdown-container"></div></td></tr>`).hide();
newRow.find('.dropdown-container').append(formComp);
$(this).after(newRow);
});
$('.dropDown').on('click', function() {
$(this).next('.colRow').slideToggle('fast');
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */