LIST GROUP ITEM TABLE - Inline Buttons Per Row

by bizamajig

HTML

<div class='textcomment'> <a class='userights1'>Username:</a>&nbsp;
	This is a comment
	<div class='commentActionButton'>
		<form action='#' method='post' class='delrepcomment'>
            <input type='hidden' name='delcommentid' />
            <input type='hidden' name='postowner' />
            <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit' />
		</form>
        <input class='reportcommentsubmit' name='submit-report' type='submit' value='report' />
	</div>
</div>
<div class='textcomment'> <a class='userights1'>Username:</a>&nbsp;
	This is a comment that extends to more than 1 line long... 
	This is a comment that extends to more than 1 line long...
	<div class='commentActionButton'>
		<form action='#' method='post' class='delrepcomment'>
            <input type='hidden' name='delcommentid' />
            <input type='hidden' name='postowner' />
            <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit' />
		</form>
		<input class='reportcommentsubmit' name='submit-report' type='submit' value='report' />
    </div>
</div>
<div class='textcomment'> <a class='userights1'>Username:</a>&nbsp;
	This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long...
	<div class='commentActionButton'>
		<form action='#' method='post' class='delrepcomment'>
            <input type='hidden' name='delcommentid' />
            <input type='hidden' name='postowner' />
            <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit' />
		</form>
        <input class='reportcommentsubmit' name='submit-report' type='submit' value='report' />
	</div>
</div>

CSS

.textcomment {color: #666; width: 98%; padding-left: 1%; padding-right: 1%; font-size: 12px; padding-bottom: 1%; padding-top: 1%; border-bottom: 1px solid #ccc;position:relative;}
.textcomment:hover {background-color: #efefef;}
.nocomments {width: 100%; color: #888; font-size: 12px; padding-bottom: 1%; padding-top: 1%;}

.commentActionButton {
	display: none; /* Progressive Enhancement - .toggle() */
	top: 0;
	right:0;
    position:absolute;
	width: 14%;
	z-index: 999;
}

.delrepcomment {
}

.deletecommentsubmit {
	background-color: #F00;
	border: none;
	color: #fff;
	opacity: 0.4;
	float:right;
	width: 48%;
	margin-right: 0%;
	padding: 2%;
}

.reportcommentsubmit {
	background-color: #F90;
	border: none;
	color: #fff;
	opacity: 0.4;
	float:right;
	width: 48%;
	margin-right: 4%;
	padding: 2%;
}

.reportcommentsubmit:hover, .deletecommentsubmit:hover {
	opacity: 0.9;
	cursor: pointer;
}

JavaScript

// Show the delete / report comment on hover
    $(".textcomment").hover(function() { 
		 var $this = $(this);       
         $(this).closest('.textcomment').find('.commentActionButton').toggle();
    });