title: Issues in set background for input of form in table
body: <p>I have created ASP page, which looks like:
  <img src="https://i.stack.imgur.com/VKvaR.png" alt="enter image description here"></p>
  
  <p>I need something like this center image:
  <img src="https://i.stack.imgur.com/ycaaJ.jpg" alt="enter image description here"></p>
  
  <p>I tried to set background for header, it works fine. However, I am not able to set for next button.</p>
  
  <p>Here is my code snippet:
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        $(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('&lt;input type=text class="input" id="tb1" value="Text Element 1" /&gt;');
          $(container).append('&lt;input type=text class="input" id="tb2" value="Text Element 2" /&gt;');
          $(container).append('&lt;input type=text class="input" id="tb3" value="Text Element 3" /&gt;');
          $(container).append('&lt;input type=text class="input" id="tb4" value="Text Element 4" /&gt;');
          $('#main').after(container);   // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
  
          var iCnt = 4;
  
          $('#btAdd').click(function() {
              if (iCnt &lt;= 19) {
  
                  iCnt = iCnt + 1;
  
                  // ADD TEXTBOX.
                  $(container).append('&lt;input type=text class="input" id=tb' + iCnt + ' ' +
                              'value="Text Element ' + iCnt + '" /&gt;');
  
  
                  $('#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('&lt;label&gt;Reached the limit&lt;/label&gt;'); 
                  $('#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('&lt;p&gt;&lt;b&gt;Your selected values&lt;/b&gt;&lt;/p&gt;' + values);
          $('body').append(divValue);
  
      }
      </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="tblmain atep" style="width: 450px;" border="0" cellpadding="0" cellspacing="0"&gt; 
     
          &lt;tbody&gt;&lt;tr&gt;
              &lt;td class="tdbodycontent" align="left"&gt;
  &lt;table class="wrapper" style="width:450px;margin:0 auto;" cellpadding="0" cellspacing="0"&gt;
                      &lt;tbody&gt;&lt;tr&gt;
                          &lt;td class="tdcontainer" align="left"&gt;
  
  &lt;table style="width:450px;" id="tbl-two-columns" border="0" cellpadding="0" cellspacing="0"&gt;
                                  &lt;tbody&gt;&lt;tr&gt;
                                      &lt;th class="invitation-header" valign="top"&gt; &lt;!-- th added for invite header --selva --&gt;
         Help make your neighborhood safer, Invite friends and family
                                      &lt;/th&gt; &lt;!-- END - th added for invite header --selva --&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td class="invitation-col2" valign="top"&gt;
  &lt;table id="tab1" class="tab-container" style="width:400px;" cellpadding="0" cellspacing="0"&gt;
                                              &lt;tbody&gt;&lt;tr&gt;
                                                  &lt;td valign="top"&gt;
  &lt;form method="post" name="form1" action="invitation_enrollv5.asp?action=1" onsubmit="return GetTextValue()"&gt;
  
                                                      &lt;!--START - Invite Buttons - Selvarani--&gt;
                                                      &lt;div style="padding: 5px; margin: 0px;"&gt;&lt;input class="input" id="tb1" placeholder="Email" type="text"&gt;&lt;input class="input" id="tb2" placeholder="Email" type="text"&gt;&lt;input class="input" id="tb3" placeholder="Email" type="text"&gt;&lt;input class="input" id="tb4" placeholder="Email" type="text"&gt;&lt;/div&gt;&lt;div id="main"&gt;&lt;a style="float: right;" href="#" id="btAdd" value="" class="bt"&gt;Invite more friends&lt;/a&gt;&lt;/div&gt;&lt;table style="margin: 0px auto 10px; width: 350px;" border="0" cellpadding="0" cellspacing="0"&gt;
                                                      
                                                      
                                                      &lt;input id="contact_list" name="contact_list" value="" type="hidden"&gt;
                                                      &lt;!--END - Invite Buttons - Selvarani--&gt;
                                                      &lt;/table&gt;
                                                      &lt;p style=""&gt;Invite from my address book&lt;/p&gt;
                                                      &lt;img src="Web5/images/invite-your-contacts.png" style="cursor:pointer;" alt="Invite your contacts" onclick="InviteBoxClick();"&gt;&lt;br&gt;
                                                      &lt;a href="#cs_container" data-cs-init="true" class="cs_import"&gt;
                                                      &lt;/a&gt;
                                                  
                                                      &lt;input name="cnote" value="" type="hidden"&gt;
                                                      &lt;input name="pkfamilyinvite" value="0" type="hidden"&gt;
                                                          &lt;input name="vn" value="0" type="hidden"&gt;
                                                        &lt;input name="gORn" value="1" type="hidden"&gt;&lt;br&gt;
                                                      &lt;input style="float: right;" id="nextbutton" name="" value="Next" type="submit"&gt; &lt;!-- id="nextbutton" added for button styles -- selva --&gt;
                                                      
                                                      &lt;/form&gt;
                                                                      &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/tbody&gt;&lt;/table&gt;
                                                           &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;&lt;/table&gt;
                                                                       &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="tdfooter" align="left"&gt;
                              &lt;div class="wrapper"&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;&lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;&lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>