We Keep Coding

How can I make the button below disabled until all the above section has at least clicked one

my code:
<div class="tables">
<form>
<table class="table table-bordered">
<thead>
<tr>
<th class="thheader">Monday</th>
<th class="thheader">Tuesday</th>
<th class="thheader">Wednesday</th>
<th class="thheader">Thursday</th>
<th class="thheader">Friday</th>
</tr>
</thead>
<tr>
<td>
</td>
<td>
<center>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn1012" /><label for="btn1012">10am - 12pm</label>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn1214" /><label for="btn1214" class="labe"> 5pm - 7pm</label>
</center>
</td>
<td>
</td>
<td>
<center>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn10" /><label for="btn10">10am - 12pm</label>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn12" /><label for="btn12" class="labe"> 5pm - 7pm</label>
</center>
</td>
<td></td>
</tr>
</table>
</form>
</div>
</center>
<center>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn1" /><label for="btn1">Thursday, March 2nd</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn2" /><label for="btn2" class="labe1">Tuesday, March 7th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn3" /><label for="btn3">Thursday, March 16th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn4" /><label for="btn4" class="labe1">Tuesday, March 21st</label>
</center>
<center>
<button class="disabled white cbtn1 c1" type="submit" id="submit" value="NEXT">NEXT<i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</center>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function() {
enable_cb();
$(".colour-button").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.colour-button1").removeAttr("disabled");
} else {
$("input.colour-button1").attr("disabled", true);
}
}
</script>
CSS:
.colour-button {
display: none;
}
label:hover {
cursor: pointer;
}
.colour-button + label {
background: #c1c1c1;
color: white;
border-radius: 5px;
padding: 5px 10px;
}
.colour-button:checked + label {
background: #cf5630;
}
.thheader{
width:135px;
text-align:center;
background-color:#FAFAFA;
color: #18181d;
}
.tables{
width:800px;
}
.labe{
padding:5px 18px !important;
}
.colour-button1 {
display: none;
}
.colour-button1 + label {
background: #c1c1c1;
color: white;
border-radius: 5px;
padding: 18px 200px;
}
.colour-button1:checked + label {
background: #cf5630;
}
.labe1{
padding:18px 207px !important;
}
.cbtn1.disabled {
background-color: #c1c1c1;
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}
I want it that after I have chosen at least one from each section, to become enabled and be orange, and clickable. How is this possible since it is a button not an input? as you can see I have a javascript for already to make the second section not active if the first isn't chosen yet.

As you are using jQuery you can disable/enable Buttons (and other fields) with the following snippet.
$('#buttonID').prop("disabled", true);
Overall your question was not very clear to me. There are a lot of ways to accomplish what you want. For example you can use listeners or onClick events.
Here is a small fiddle (made more or less from your code) that activates a button if you select at least one date checkbox and one time checkbox: https://jsfiddle.net/3fc30k5s/
good luck :)

Add a new row dynamically after clicking a button in jquery

I have to create a form which can dynamically adds rows after clicking a button, below is the code. So basically I want to clone the row with id="ADD" after clicking the btAdd button in the next row.
I don't know what to add inside the append function? I have tried a few things but its not working. Thanks in advance.
$(document).ready(function(){
$("#btAdd").click(function(){
$("#ADD").append(" ");
});
});
</script>
</head>
<body>
<h1></h1>
<div id = "myDiv">
<form name="form1">
<table border='1' width='700' align="center" cellpadding='5' cellspacing='10'>
<tr>
<th>Place configuration here</th>
</tr>
<tr>
<td>Server Url: <input type="text" name="surl" id="surl"></td>
</tr>
<tr>
<td>
Filter Name: <input type="text" name="fname"id="fname">
Filter Type
<select name="operation">
<option value="text">Text</option>
<option value = "List">List</option>
</select>
</td>
</tr>
<tr id="ADD">
<td>
Filter Options: <input type="text" name="foptions"id="foptions">
<input type="button" name="ADDb" value="+" id="btAdd">
</td>
</tr>
<tr>
<td>
Filter Label: <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
</td>
</tr>
<tr>
<td><input type="button" name="submitb" id="submitb" value="Submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>

try it:
$("#btAdd").click(function(){
$("#ADD").clone().removeAttr("id").insertAfter("#ADD");
});

Try this
$("#btAdd").click(function(){
$("#ADD").clone().attr("id","ADD_"+$("#table1 tbody").children("tr").length).insertAfter("#ADD");
});
where table1 is the table id.

<!DOCTYPE HTML>
<html>
<head>
<style>
#myDiv { margin: 0 auto; width: 800px; }
.tr { clear: both; border: 1px solid #ccc; margin: 0 0 10px; padding: 5px; overflow: hidden; }
.tr .label { float: left; width: 115px; }
.tr .inputs { float: left; width: 230px; }
.tr .btns { float: left; width: 100px; }
.tr ul { margin: 0; padding: 0; }
.tr li { list-style: none; }
</style>
</head>
<body>
<div id = "myDiv">
<form name="form1">
<div class="tr">
Place configuration here
</div>
<div class="tr">
Server Url:
<input type="text" name="surl" id="surl">
</div>
<div class="tr">
Filter Name:
<input type="text" name="fname" id="fname">
Filter Type
<select name="operation">
<option value="text">Text</option>
<option value = "List">List</option>
</select>
</div>
<div class="tr" id="ADD">
<div class="label">Filter Options:</div>
<ul class="inputs">
<li>
<input type="text" name="foptions[]"> <input type="button" name="ADDb" value="+" id="btAdd">
</li>
</ul>
</div>
<div class="tr">
Filter Label:
<input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
</div>
<div class="tr">
<input type="button" name="submitb" id="submitb" value="Submit">
</div>
</form>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var S = '<li><input type="text" name="foptions[]"> <input type="button" name="rm" value="-" /></li>',
$ul = $('#ADD ul'), $add = $('#ADD');
$add.on('click.add', '#btAdd', function() {
$ul.append(S);
});
$add.on('click.rm', '[name=rm]', function() {
$(this).closest('li').remove();
});
});
</script>
</body>
</html>

js or CSS is not working

I have a signup form in which i have 2 drop downs one is category and one is Gender. i have a validation.js which validates my signup form on not selecting any option in the drop down box. the validation for gender is working fine. But for category even though i select a category it displaying an error and its stopping the submission. This was working fine before after i changed my design that is CSS this problem is occurring.
This is my Signup.jsp:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration Form</title>
<link href="CSS/Signup.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/State.js"></script>
<script type="text/javascript" src="js/Validate.js"></script>
</head>
<script type="text/javascript">
function ageCount() {
var date1 = new Date();
var dob = document.getElementById("SnapHost_Calendar").value;
var date2 = new Date(dob);
var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
//Regex to validate date format (MM/dd/yyyy)
if (pattern.test(dob)) {
var y1 = date1.getFullYear();
//getting current year
var y2 = date2.getFullYear();
//getting dob year
var age = y1 - y2;
//calculating age
document.getElementById("txtAge").value = age;
doucment.getElementById("txtAge").focus();
return true;
}
}
EnableSubmit = function(val) {
var sbmt = document.getElementById("submit");
if (val.checked == true) {
sbmt.disabled = false;
} else {
sbmt.disabled = true;
}
};
</script>
<script type="text/javascript">
function capitalize(el) {
var s = el.value;
el.value = s.substring(0, 1).toUpperCase() + s.substring(1);
}
</script>
<body onLoad="addList()">
<jsp:include page="Header.jsp"></jsp:include><br />
<div id="signuphead">
<h1>Welcome to registration page</h1>
<br /> <br />
<h3>Enter your personal details here</h3>
</div>
<form action="RegisterServlet" method="post" name="Register"
id="signup" onSubmit="return validate()">
<div id="signuptable">
<table>
<tr>
<td>First Name* :</td>
<td><input type="text" name="txtFname" id="txtFname"
maxlength="30" onKeyup="capitalize(this)" /><br /> <span
id="errorFirstNameMissing" style="display: none;"><font
color="red">*Please provide your first name.</font></span> <span
id="errorFirstNameInValid" style="display: none;"><font
color="red">*Please provide a valid first name.</font></span></td>
</tr>
<tr>
<td>Last Name* :</td>
<td><input type="text" name="txtLname" id="txtLname"
maxlength="30" onKeyup="capitalize(this)" /><br /> <span
id="errorLastNameMissing" style="display: none;"><font
color="red">*Please provide your Last name.</font></span> <span
id="errorLastNameInValid" style="display: none;"><font
color="red">*Please provide a valid Last name.</font></span></td>
</tr>
<tr>
<td>Gender* :</td>
<td><select name="txtGender" id="txtGender">
<option value="unknown">Select your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br /> <span id="errorMissingGender" style="display: none;"><font
color="red">*Please select a Gender.</font></span></td>
</tr>
<tr>
<td>Category* :</td>
<td><select name="txtCategory" id="txtCategory">
<option value="unknown">Select your Category</option>
<option value="Affiliate">Affiliate</option>
<option value="Client">Client</option>
</select><br /> <span id="errorMissingCategory" style="display: none;"><font
color="red">*Please select a Category.</font></span></td>
</tr>
<tr>
<td><script type="text/javascript" src="js/Calendar.js"></script>
</td>
</tr>
<tr>
<td>Age :</td>
<td><input type=text name=txtAge id="txtAge" readonly
style="width: 20px; background-color: #D0D0D0; border: none" />yrs.</td>
</tr>
<tr>
<td>Address* :</td>
<td><textarea rows="5" name="txtAddr" id="txtAddr" cols="30"></textarea><br />
<span id="errorMissingAddress" style="display: none;"><font
color="red">*Please provide a valid Address.</font></span></td>
</tr>
<tr>
<td>State* :</td>
<td><select
onchange="print_city('txtCity',this.selectedIndex);" id="txtState"
name="txtState"></select><br /> <span id="errorMissingState"
style="display: none;"><font color="red">*Please
select a state.</font></span></td>
</tr>
<tr>
<td>City* :</td>
<td><select name="txtCity" id="txtCity"></select> <script
type="text/javascript">
print_state("txtState");
</script><br /> <span id="errorMissingCity" style="display: none;"><font
color="red">*Please select a city.</font></span></td>
</tr>
<tr>
<td>Pincode* :</td>
<td><input type="text" name="txtPin" id="txtPin" /><br /> <span
id="errorMissingPinCode" style="display: none;"><font
color="red">*Please provide your Pincode.</font></span> <span
id="errorPinCodeInvalid" style="display: none;"><font
color="red">*Please provide a valid Pincode.</font></span></td>
</tr>
<tr>
<td>Choose your UserName* :</td>
<td><script type="text/javascript" src="jquery.js"></script> <input
type="text" name="txtUsername" id="username">#gmail.com
<div id="status"></div> <script type="text/javascript"
src="js/check_user.js"></script> <span id="errorMissingUserName"
style="display: none;"><font color="red">*Please
provide your username.</font></span> <span id="errorUserNameInvalid"
style="display: none;"><font color="red">*Please
provide a valid username.Username can contain only alphabets
numbers and periods</font></span> <span class="status"></span>
</tr>
<tr>
<td>Alternate e-Mail* :</td>
<td><input type="text" name="txtEmail" id="txtEmail" /><br />
<span id="errorMissingEmail" style="display: none;"><font
color="red">*Please provide your emailId.</font></span> <span
id="errorEmailInvalid" style="display: none;"><font
color="red">*Please provide a valid emailId.</font></span></td>
</tr>
<tr>
<td>Contact Number :</td>
<td><input type="text" name="txtStd" id="txtStd" maxlength="6"
style="width: 40px" />-<input type="text" name="txtPhone"
id="txtPhone" maxlength="8" /><br /> <span
id="errorStdCodeInvalid" style="visibility: hidden;"><font
color="red">*Please provide a valid std code.</font></span> <span
id="errorPhoneNoInvalid" style="visibility: hidden;"><font
color="red">*Please provide a valid contact no.</font></span></td>
</tr>
<tr>
<td>Mobile Number* :</td>
<td>+91-<input type="text" name="txtMobile" id="txtMobile"
maxlength="10" /><br /> <span id="errorMissingMobileNo"
style="display: none;"><font color="red">*Please
provide your mobile number.</font></span> <span id="errorMobileNoInvalid"
style="display: none;"><font color="red">*Please
provide a valid mobile number.</font></span>
</td>
</tr>
</table>
<br />
<p>
<font color="red">Note: All the fields marked with * are
mandatory.</font>
</p>
<p>
<input type="checkbox" name="chkAgree" onclick="EnableSubmit(this)" /><font
color="green"> I here by declare that the above data entered
by me is true to my knowledge.</font>
</p>
<br />
<div class="style2">
<table>
<tr>
<td><button type="submit" id="submit" disabled
style="width: 80px; height: 40px">Submit</button></td>
<td><div class="divider"></div></td>
<td><button type="reset" style="width: 80px; height: 40px"
onClick="resetForm()">Reset</button></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
This is my Validate.js:
function validate() {
var valid = true;
var validationMessage = 'Please correct the following errors:\r\n';
document.getElementById('errorMissingCategory').style.display = 'none';
document.getElementById('errorMissingGender').style.display = 'none';
if (document.getElementById('txtGender').value == 'unknown') {
validationMessage = validationMessage
+ ' - Please select a gender\r\n';
document.getElementById('errorMissingGender').style.display = '';
valid = false;
} else {
document.getElementById('errorMissingGender').style.display = 'none';
}
if (document.getElementById('txtCategory').value == 'unknown') {
validationMessage = validationMessage
+ ' - Please select a category\r\n';
document.getElementById('errorMissingCategory').style.display = '';
valid = false;
} else {
document.getElementById('errorMissingCategory').style.display = 'none';
}
if (valid == false) {
alert(validationMessage);
}
return valid;
}
And this is my Signup.css:
#CHARSET "ISO-8859-1";
#signuphead {
color: #059BD8;
text-align: left;
width: 1000px;
color: #059BD8;
background-color: #E3F1F9;
border-style: groove;
}
#signup {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #E3F1F9;
}
#signuptable {
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #059BD8;
border-style: groove;
}
#note {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #E3F1F9;
}
#thanks {
width: 956px;
height: auto;
}
I am confused because i dono whether my js has a problem as previous project with another CSS works fine, or it is a problem with the css itself
Kindly help in fixing this. Thanks in advance.

The sample code you attached is working. Maybe you have another element which contains the same ID as the Category select.

The error in your code is missing the closing </div> tag before form tag closing.
I have updated the code. just see once.
Plucker

Why is my JQuery DIV transparent?

My Jquery ajax page loads and shows up in the DIV that lays itself over the other page elements but the DIV is transparent or it is in fact behind the other components and just looking like it is transparent and neds to render on top. How do I achieve a normal DIV over the other pages with a white background? Why is it difficult making an element not transparent? How can this be deafult behavior for a page element?
Javascript
function popup() {
alert('opening popup');
var popup = $('.newpopup');
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html(data);
popup.show('fast');
}
}
);
/*
popup.html("test");
popup.show('fast');
*/
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
I tried creating a jsfiddle to reproduce the problem but it seems jsfiddle can't do .getor .ajaxsince it couldn't load a page from the internet to the DIV.
What can you propose? There should be a clear solution to this and transparancy really should not be a default state for an element so how come the element renders with transparency?
The HTML is trivial
<div class="newpopup">
</div>
<button id="mypopup">popup</button>
My CSS which is like it is never reached is this
.newpopup {
z-index:100;
position: absolute;
top:50%;
left:50%;
background-color:#ffffff; //not working
}
And the HTML that is the actual popup / div is this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><link href="css_js/styles.css" rel="stylesheet" type="text/css">
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
</td>
<td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="sokF">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend>
<div class="fl30"> Förnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend>
<div class="fl30"> Företag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>
<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->
<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>
<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
-->
<div class="fl50"> </div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value=" Sök " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td><h3>Sökresultat:</h3></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span> </td>
</tr>
<tr>
<td><input type="button" value="Visa alla"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 527</td>
<td> </td>
<td>Visa ärenden: << 1-200 201-400 401-527 >> </td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
<th class="thkant">Förnamn</th>
<th class="thkant">Efternamn</th>
<th class="thkant">Adress</th>
<th class="thkant">Postnr</th>
<th class="thkant">Postort</th>
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>
</tr>
</table>
<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>
<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="Ändra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>
</body>
</html>

There should be a clear solution to this and transparancy really
should not be a default state for an element so how come the element
renders with transparency?
Actually, unless you specify an explicit background colour for an element the default is that they are transparent. This is so that the real page background can show through.
Just putting a background colour (and a z-Index if appropriate) on the popup div should then make it appear as an overlay as expected.
If it's not working then something is preventing the (correct) CSS you've supplied from being used.
Perhaps you should remove the extra HTML body etc from the loaded page? You shouldn't have two <body> tags present in the page at once. If you can't change the loaded page (e.g. if it's also used as a standalone page) then try something like:
popup.empty().append($('body', data).children());
instead of:
popup.html(data);

use following code to apply the background color to the div
$(".newpopup ").css('background-color', 'white');

So, if I'm reading this right, your jQuery script is reading a .jsp file, which has the full header setion, body etc...
You should either place the contents of the popup into an iFrame or strip out all the tags before (and including) the <body> and after (and including) </body>

you will try this attributes in .newpopup class
'overlayShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'opacity' : '0.80';
or
#popup {
margin: 0 auto;
height:100%;
width: 100%;
z-index:501;
background: #effeef;
position: absolute;
padding:0;
top: 0;
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
filter:alpha(opacity=100);
}
#window {
padding:0;
width: 200px;
height: 200px;
margin: 0 auto;
border: 3px solid #d3d4d3;
background:url(sign_in_bg.gif) repeat-x;
position: absolute;
top: 200px;
left: 45%;
}
<div id="popup" align="center" style="display:none">
<div id="window" align="center">
content....
</div>

increment the value of one td in a table

I have a page with an "add item" button. When this button is clicked, an ajax call is made and a table is returned with all the information from the database based on the sku entered. (Dummy data is there now for testing.) If the button is only clicked once, there is no trouble incrementing or decrementing the qty value. If the button is clicked two, or more, times, if you click the increment button on the second table it will increase the value in the first table.
I have added a counter that gives a unique number to each table created. I think what I want to do is figure out how to determine the counter number for the specific table that is being incremented and pass it to the javascript function so it works with that specific entry.
Here is the code with the button, ajax call, and javascript:
<script type="text/javascript">
var count = 1;
$('#items').live('pageinit',function(event){
$('#additem').click(function () {
//alert("add clicked");
var request = $.ajax({
url: "http://www.furnguy.com/app-pages/additem.php",
type: "POST",
data: {COUNTER : count},
dataType: "html"
});
request.done(function(html) {
//alert("here");
if (html != '') {
$('#salesitems').append(html).trigger('create');
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
count++;
});
});
function deleteItem() {
$('table').click(function(){
$(this).parent().remove();
});
};
function increaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal + 1);
}
};
function decreaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal - 1);
}
};
</script>
</head>
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
<div data-role="header">
<h1>Sales Entry</h1>
</div><!-- /header -->
<div data-role="content">
<div id="main_nav">
<span style="float: left; display: inline; width: 100px;">
<label>Enter SKU</label>
</span>
<span style="float: left; display: inline; width: 250px;">
<input type="text" name="initialsku" id ="initialsku" />
</span>
<br /><br /><br />
<button id="additem" data-icon="plus" data-inline="true" data-mini="true" data-theme="b">Add Item</button>
<!-- <button id="removeitem" data-icon="minus" data-inline="true" data-mini="true" data-theme="b">Remove Item</button> -->
<div id="salesitems"></div>
</div>
</div><!-- /content -->
</body>
</html>
here is the page being called by the ajax:
<?php
$counter = $_POST['COUNTER'];
?>
<body>
<div data-role="fieldcontain">
<div class="addItems">
<table id="myTable" style="border-bottom: 1px solid black;">
<tr>
<td style="width: 50px;">
<label for="qty">Qty:</label>
</td>
<td style="width: 75px;">
<input type="button" value="+" id="increase" onclick="increaseQty();" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty();" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty" value="1" style="float: left; display: inline;" />
</td>
<td style="width: 50px;">
<label for="sku">SKU:</label>
</td>
<td style="width: 350px;">
<input type="text" name="sku" id="sku" readonly="readonly" value="123526874256" />
</td>
<td style="width: 50px;">
<label for="retail">Retail:</label>
</td>
<td style="width: 250px;">
<input type="text" name="retail" id="retail" readonly="readonly" value="$1599.99" />
</td>
<td id="tableNumber">
<?php echo $counter; ?>
</td>
</tr>
<tr>
<td style="width: 50px;">
<label for="desc">Desc:</label>
</td>
<td colspan="5">
<input type="text" name="desc" id="desc" readonly="readonly" value="This is a really big couch." />
</td>
<td>
<input type="button" value="X" onclick="deleteItem();" />
</td>
</tr>
</table>
</div>
</div>
Anyone have suggestions about this? I would really appreciate the help as I have been working on this for a couple days now.
Thanks in advance!

Every time you click the button, you are inserting a new table with a #qty input. When you later try to increase quantity, jQuery just finds the first #qty in the dom: your first table.
You should probably set a unique id on your qty input, e.g.:
<input type="button" value="+" id="increase" onclick="increaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty_<?php echo $_POST['INITIALSKU']; ?>" value="1" style="float: left; display: inline;" />
and then rewrite the increase/decrease functions to take the id of the field to modify. I don't actually speak PHP but you get the idea