Issues in set background for input of form in table - html

Question

I have created ASP page, which looks like:
I need something like this center image:
I tried to set background for header, it works fine. However, I am not able to set for next button.
Here is my code snippet:
$(document).ready(function() {
// CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px'});
$(container).append('<input type=text class="input" id="tb1" value="Text Element 1" />');
$(container).append('<input type=text class="input" id="tb2" value="Text Element 2" />');
$(container).append('<input type=text class="input" id="tb3" value="Text Element 3" />');
$(container).append('<input type=text class="input" id="tb4" value="Text Element 4" />');
$('#main').after(container); // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
var iCnt = 4;
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Text Element ' + iCnt + '" />');
$('#main').after(container); // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
}
else { // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. (20 IS THE LIMIT WE HAVE SET)
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
$('#btRemove').click(function() { // REMOVE ELEMENTS ONE PER CLICK.
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) { $(container).empty();
$(container).remove();
$('#btSubmit').remove();
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt')
}
});
$('#btRemoveAll').click(function() { // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$(container).empty();
$(container).remove();
$('#btSubmit').remove(); iCnt = 0;
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue).empty();
$(divValue).remove(); values = '';
$('.input').each(function() {
divValue = $(document.createElement('div')).css({
padding:'5px', width:'200px'
});
values += this.value + ','
});
$(divValue).append('<p><b>Your selected values</b></p>' + values);
$('body').append(divValue);
}
#tbl-two-columns td.invitation-col2
{
padding-left:0px !important;
}
.cs_pendingInvitation img
{
margin-top:3px;
}
// styles for invite more friends -- selva
.invitation-header
{
background: none repeat scroll 0% 0% #C2EBFF;
z-index: 99;
}
#btAdd
{
color: #00BFFF;
}
#main a{
text-decoration:none;
}
input#nextbutton {
padding: 5px 15px;
background: none repeat scroll 0% 0% #00BFFF;
color: #FFF;
border: 0px none;
cursor: pointer;
border-radius: 5px;
}
.input {
color: #333;
height: 25px;
margin: 5px;
width: 380px;
}
<table class="tblmain atep" style="width: 450px;" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="tdbodycontent" align="left">
<table class="wrapper" style="width:450px;margin:0 auto;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="tdcontainer" align="left">
<table style="width:450px;" id="tbl-two-columns" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<th class="invitation-header" valign="top"> <!-- th added for invite header --selva -->
Help make your neighborhood safer, Invite friends and family
</th> <!-- END - th added for invite header --selva -->
</tr>
<tr>
<td class="invitation-col2" valign="top">
<table id="tab1" class="tab-container" style="width:400px;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top">
<form method="post" name="form1" action="invitation_enrollv5.asp?action=1" onsubmit="return GetTextValue()">
<!--START - Invite Buttons - Selvarani-->
<div style="padding: 5px; margin: 0px;"><input class="input" id="tb1" placeholder="Email" type="text"><input class="input" id="tb2" placeholder="Email" type="text"><input class="input" id="tb3" placeholder="Email" type="text"><input class="input" id="tb4" placeholder="Email" type="text"></div><div id="main"><a style="float: right;" href="#" id="btAdd" value="" class="bt">Invite more friends</a></div><table style="margin: 0px auto 10px; width: 350px;" border="0" cellpadding="0" cellspacing="0">
<input id="contact_list" name="contact_list" value="" type="hidden">
<!--END - Invite Buttons - Selvarani-->
</table>
<p style="">Invite from my address book</p>
<img src="Web5/images/invite-your-contacts.png" style="cursor:pointer;" alt="Invite your contacts" onclick="InviteBoxClick();"><br>
<a href="#cs_container" data-cs-init="true" class="cs_import">
</a>
<input name="cnote" value="" type="hidden">
<input name="pkfamilyinvite" value="0" type="hidden">
<input name="vn" value="0" type="hidden">
<input name="gORn" value="1" type="hidden"><br>
<input style="float: right;" id="nextbutton" name="" value="Next" type="submit"> <!-- id="nextbutton" added for button styles -- selva -->
</form>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="tdfooter" align="left">
<div class="wrapper">
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

Answer 1

Replace this input#nextbutton { with #nextbutton {