We Keep Coding

How to remove table data shaking after coming tooltip message

After creating a table, when I implemented the Onclick text copier in table data, the Onclick text copier working well but the problem is after clicking on the table data tooltip message come, and then data shake right to left. In Laravel temple, I embedded this code in a big data table somewhere shaking somewhere not shaking. How can I solve this problem?
function textCopied(el){
var inp = document.createElement('input');
document.body.appendChild(inp);
inp.value = el.textContent;
inp.select();
document.execCommand('copy',false);
inp.remove();
var tt = el.parentNode.querySelector(".custom-tooltip");
tt.style.display = "inline";
setTimeout( function() {
tt.style.display = "none";
}, 1000);
};
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.copy_button{
background-color:#fff;
border:0;
outline:0;
cursor:pointer;
opacity:1;
position:absolute;
width:40px;
height:40px;
z-index:9;
border-radius:24px;
}
.button-tooltip-container {
display: flex;
align-items: center;
margin-top: 16px;
min-height: 30px;
}
#custom-tooltip {
display: none;
margin-left: 40px;
padding: 5px 12px;
background-color: #000000df;
border-radius: 4px;
color: #fff;
}
table tbody tr td{
padding: 20px 80px;
}
<div class="container">
<table>
<thaed>
<tr>
<th>ID</th>
</tr>
</thaed>
<tbody>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94426</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94425</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94424</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>

How to make a div minimum width based on its content

I have a div with table inside. The div is full in width, but whenever I resized the screen, the div will reduce its size then its content will overlapped the div.
Now, I want the minimum width of the div based on the contents(table).
My main div is class="search".
Here is the link for my codes:
.search {
border: 2px solid #FDBF3B;
background-color: #FFEBC1;
padding: 10px;
margin: 5px 0;
}
.search table {
border: none;
}
.search .header {
margin-bottom: 5px;
border-bottom: 1px solid #FDBF3B;
padding-bottom: 2px;
color: #000F1F;
font-weight: bold;
overflow: hidden;
}
.search .buttons {
margin-top: 5px;
border-top: 1px solid #FDBF3B;
padding-top: 8px;
white-space: nowrap;
}
.inner {
padding: 7px;
min-height: 480px;
z-index: 1;
overflow: auto;
}
<DIV class=inner>
<DIV class=search sizset="false" sizcache017720493147691946="40 33 1">
<DIV class=header>Search Options </DIV>
<TABLE sizset="false" sizcache017720493147691946="40 33 1">
<TBODY sizset="false" sizcache017720493147691946="40 33 1">
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_NAME>Name:</SPAN>
</TD>
<TD>
<INPUT name=NAME style="BACKGROUND-COLOR: #ffffff" type=text size=15 maxLength=10 data-dpmaxz-eid="4">
</TD>
</TR>
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_ADDRESS>Address:</SPAN>
</TD>
<TD>
<INPUT name=ADDRESS style="BACKGROUND-COLOR: #ffffff" type=text size=40 maxLength=50 data-dpmaxz-eid="5"> </TD>
</TR>
</TBODY>
</TABLE>
<DIV class=buttons>
<INPUT name=SEARCH class=BUTTON type=button value=Search>
<INPUT name=SEARCH class=BUTTON type=button value=Clear>
<INPUT name=CREATE class=BUTTON type=button value=Create> </DIV>
</DIV>
</DIV>

apply min-width to parent div and manage overflow in body. Whenever you reduce widnow width lesser then search div's width, there will be a scroll in body.
.body{
overflow: scroll;
}
.search {
min-width:380px;
}

jquery tabbed selector with dropdown selectors, dropdowns don't match on tab switch

Thanks to help from members oka and Mike Robinson, I have managed to build two tables that users will view and play with using tabs and dropdowns.
My two tables have identical structures, each has an identical drop-down menu to show/hide columns. The idea is for the user to select a "choice" from the drop down, then tab over to the other table and compare choices.
Everything works, EXCEPT -- when you tab over to the other table, the correct column -- '.target' -- is shown (and the correct columns -- '.choice' -- are hidden) but the drop down resets to its default. So the drop down displays one choice; the shown columns display another, which will confuse viewers.
The code "remembers" which choices were hidden and which target was shown, but the drop down doesn't.
I'm a bit stumped. Any ideas what's going on?
Here are the jquery, css, html, and snippet:
function keepSelect() {
var val = $(this).val();
var target = '.' + val;
$('.choice').hide();
$(target).show();
}
$(document).ready(function() {
$('.sel').on('change', keepSelect).change();
$(document).on('change', '.sel', keepSelect).change();
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('#' + tab_id).addClass('current');
})
})
body {
margin-top: 1px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container {
position: absolute;
width: 25%;
margin: 0 auto;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border: 3px solid red;
width: 25%;
font-family: Verdana;
font-size: 8pt;
text-align: center;
font-weight: normal;
}
ul.tabs li.current {
background: #ededed;
color: #222;
font-family: Verdana;
font-size: 10pt;
text-align: center;
font-weight: bold;
}
.tab-content {
display: none;
background: none;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
<div class='container'>
<ul class='tabs'>
<li class='tab-link current' data-tab='tab-1'>ViewA</li>
<li class='tab-link' data-tab='tab-2'>ViewB</li>
</ul>
<div id='tab-1' class='tab-content current'>
<select class="sel">
<option class="one" value="one">1</option>
<option class="two" value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>5000</td>
<td class="choice one">100</td>
<td class="choice two">200</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">40</td>
<td class="choice two">90</td>
</tr>
</table>
</div>
<div id='tab-2' class='tab-content'>
<select class="sel">
<option class="one" value="one">1</option>
<option class="two" value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>55.56</td>
<td class="choice one">2.9</td>
<td class="choice two">9.87</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">4.05</td>
<td class="choice two">8.77</td>
</tr>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Try this:
$(document).ready(function () {
$('.choice').hide();
$('.one').show();
$('.sel').change(function(){
$('.choice').hide();
$( '.' + this.value).show();
$('.sel').val( this.value );
});
$('ul.tabs li').click(function () {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('#' + tab_id).addClass('current');
});
});
jsFiddle Demo
$(document).ready(function () {
$('.sel').change(function(){
$('.choice').hide();
$( '.'+this.value).show();
$('.sel').val( this.value );
});
$('ul.tabs li').click(function () {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('#' + tab_id).addClass('current');
});
});
body {
margin-top: 1px;
font-family:'Trebuchet MS', serif;
line-height: 1.6
}
.container {
position: absolute;
width: 25%;
margin: 0 auto;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border: 3px solid red;
width: 25%;
font-family: Verdana;
font-size: 8pt;
text-align: center;
font-weight: normal;
}
ul.tabs li.current {
background: #ededed;
color: #222;
font-family: Verdana;
font-size: 10pt;
text-align: center;
font-weight: bold;
}
.tab-content {
display: none;
background: none;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='container'>
<ul class='tabs'>
<li class='tab-link current' data-tab='tab-1'>ViewA</li>
<li class='tab-link' data-tab='tab-2'>ViewB</li>
</ul>
<div id='tab-1' class='tab-content current'>
<select class="sel">
<option class="one" value="one">1</option>
<option class="two" value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>5000</td>
<td class="choice one">100</td>
<td class="choice two">200</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">40</td>
<td class="choice two">90</td>
</tr>
</table>
</div>
<div id='tab-2' class='tab-content'>
<select class="sel">
<option class="one" value="one">1</option>
<option class="two" value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>55.56</td>
<td class="choice one">2.9</td>
<td class="choice two">9.87</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">4.05</td>
<td class="choice two">8.77</td>
</tr>
</table>
</div>
</div>

Make Header dissapear when full screen mode is detected in browser (F11)

For this type of question i think there is no need to show you my code, but in case there is a need to do so i will show my code.
Here is my question
Is there any way to make it so a part of my page disappears or hide it when the browser (IT, Firefox, Chrome, Opera, etc) is set to Full Screen ( Pressing F11)
I have set up an internal website where i show dashboards and they are displayed on big screens.
All i want is the page to detect if the browser is in full screen, if so i want to header (includes logo + Navigation Menu) to hide and reappear when the browser is exited from full screen mode.
EDIT: here is some sample code of the picture displayed below
/*---------------- Default styles---------------- */
* {
margin: auto;
outline: 0;
padding: 0;
border: 0;
text-decoration: none;
vertical-align: baseline;
}
html {
font-size: 75%;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 1rem;
background-color: #f7f7f7;
width: 100%;
overflow-y: scroll;
}
/*----------------Header Styles----------------*/
header {
width: 80%;
text-align: center;
}
header img {
padding-top: 3%;
padding-bottom: 3%;
}
/*------------------SUB MENU STYLE-----------------*/
#wrapper {
width: 100%;
margin: 20% auto;
text-align: left;
}
#nav ul {
background-color: #ffd800;
list-style-type: none;
padding: 0;
margin: 0;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #6FC4D5;
/*Borders*/
border-radius: 5%;
-moz-border-radius: 5%;
-webkit-border-radius: 5%;
border: 0px solid #000;
}
#nav ul li a,
visited {
display: block;
padding: 15px;
color: #000;
font-weight: bold;
text-decoration: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e8e4e4;
min-width: fill-available;
}
#nav ul ul li {
display: block;
}
#nav ul ul li:hover {
background-color: #6FC4D5;
}
#nav ul li:hover ul li a,
visited {
color: Black;
font-weight: 500;
}
#nav ul ul li:hover > ul {
display: block;
}
#nav ul ul ul {
margin-top: -21%;
width: 100%;
margin-left: 100%;
background-color: #e8e4e4;
}
/* Dropdown Menu Arrow */
#nav ul li > a:after {
color: #000;
font-style: normal;
content: '▾';
}
#nav ul li > a:hover:after {
color: #444;
content: '▸';
}
#nav ul li > a:only-child:after {
content: ' ';
}
#nav ul li ul li > a:after {
color: #000;
font-style: normal;
content: '▸';
}
#nav ul li ul li > a:hover:after {
color: #444;
content: '▾';
}
#nav ul li ul li > a:only-child:after {
content: ' ';
}
/*----------------Article Style----------------*/
article {
width: 80%;
margin-top: 0%;
margin-bottom: 5%;
text-align: center;
}
#hr h1 {
padding-top: 0%;
padding-bottom: 0;
}
article h1 {
margin-top: 5%;
font-size: 2em;
text-align: center;
}
article p {
width: auto;
text-align: left;
font-size: 100%;
margin: 3% 0%;
padding: 0% 10% 0% 10%;
}
article p img {
margin: 1% 5%;
padding-left: 19.5%;
padding-right: 19.5%;
width: 50%;
}
/*----------------PDF File view----------------*/
object {
padding-top: 5%;
width: 60%;
height: 1070px;
}
#pdfsideview embed {
padding-top: 5%;
width: 65%;
height: 730px;
}
iframe {
width: 100%;
height: 1070px;
}
caption {
padding: 5% 0% 5% 0%;
font-size: 2rem;
font-weight: bold;
}
table {
width: 70%;
border-collapse: collapse;
border-spacing: 0;
}
#dialing table {
width: 100%;
}
table,
th,
td {
border-collapse: collapse;
border-spacing: 0;
}
th {
height: auto;
text-align: left;
}
th,
th:hover {
background-color: #f7f7f7;
}
td {
text-align: left;
height: auto;
}
tr:hover {
background-color: #6FC4D5;
/*Borders*/
border-radius: 3%;
-moz-border-radius: 3%;
-webkit-border-radius: 3%;
border: 0% solid #000;
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" http-equiv="Content-type" content="text/html" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="../scripts/modernizr-1.5.js"></script>
</head>
<body>
<header style="width:100%; background-image: url(../../images/Header-Pic.png); background-position: right;background-repeat: no-repeat; background-size: 100% 100%">
<a href="../index.html">
<img src="../../images/wiki.png" alt="">
</a>
</header>
<div id="navWrapper">
<div id="nav">
<ul>
<!--HOME DROPDOWN MENU-->
<li>Home
</li>
<li>
<!--DIRECTORY MENU-->
Directory
<ul>
<li> Email Hierarchy
</li>
<li>Dialing Codes
</li>
<li>Phone Directory
</li>
</ul>
</li>
<li>
<!--TIPS and HINTS MENU-->
Tips and Hints
<ul>
<!-- Arrage this sub menu in alphabetical order!!-->
<li>Tips and Hints
</li>
<li>Windows Keyboard Shortcuts
</li>
</ul>
</li>
<li>
<!--HR DROPDOWN MENU-->
HR
<ul>
<!-- Arrage this sub menu in alphabetical order!!-->
<!--<li>HR</li>-->
<li>Dress Code Policy
</li>
<li>Gym Reimbursement Program
</li>
<li>Holiday Schedule
</li>
<li>Time Off Policy
</li>
</ul>
</li>
<li>
<!--TUTORIALS DROP DOWN MENU-->
TURORIALS
<ul>
<!-- Arrage this sub menu in alphabetical order!!-->
<li>About this PAGE
</li>
<li>Clean Cookies and Cache
</li>
<li>Google Drive
</li>
<li>Find Computer Name
</li>
<li>Set up Network Printer
</li>
<li>VPN
</li>
</ul>
</li>
<li>
<!--DIRECTORY MENU-->
Dashboards
<ul>
<li>Call Center Calls Week Compare
</li>
<li>Call Center Dashboard
</li>
<li>Dashboard
</li>
<li>Sales Dashboard
</li>
</ul>
</li>
</ul>
</div>
</div>
<article>
<div id="dialing">
<table class="sortable">
<caption style="padding-top: 50px;">Dialing Codes</caption>
<tr>
<th>Feature</td>
<th>Code</td>
</tr>
<tr>
<td>All: Call Flow Toggle
</td>
<td>*28</td>
</tr>
<tr>
<td>All: Time Condition Override
</td>
<td>*27</td>
</tr>
<tr>
<td>Asterisk General Call Pickup
</td>
<td>*8</td>
</tr>
<tr>
<td>Call Forward All Activate
</td>
<td>*72</td>
</tr>
<tr>
<td>Call Forward All Deactivate
</td>
<td>*73</td>
</tr>
<tr>
<td>Call Forward All Prompting Activate
</td>
<td>*720</td>
</tr>
<tr>
<td>Call Forward All Prompting Deactivate
</td>
<td>*74</td>
</tr>
<tr>
<td>Call Forward Busy Activate
</td>
<td>*90</td>
</tr>
<tr>
<td>Call Forward Busy Deactivate
</td>
<td>*91</td>
</tr>
<tr>
<td>Call Forward Busy Prompting Activate
</td>
<td>*900</td>
</tr>
<tr>
<td>Call Forward Busy Prompting Deactivate
</td>
<td>*92</td>
</tr>
<tr>
<td>Call Forward No Answer/Unavailable Activate
</td>
<td>*52</td>
</tr>
<tr>
<td>Call Forward No Answer/Unavailable Deactivate
</td>
<td>*53</td>
</tr>
<tr>
<td>Call Forward No Answer/Unavailable Prompting Activate
</td>
<td>*520</td>
</tr>
<tr>
<td>Call Forward Toggle</td>
<td>*740</td>
</tr>
<tr>
<td>Call Waiting - Activate
</td>
<td>*70</td>
</tr>
<tr>
<td>Call Waiting - Deactivate
</td>
<td>*71</td>
</tr>
<tr>
<td>Camp-On Cancel</td>
<td>*83</td>
</tr>
<tr>
<td>Camp-On Request</td>
<td>*82</td>
</tr>
<tr>
<td>Camp-On Toggle</td>
<td>*84</td>
</tr>
<tr>
<td>ChanSpy</td>
<td>555</td>
</tr>
<tr>
<td>Check Recording</td>
<td>*99</td>
</tr>
<tr>
<td>Dial Voicemail</td>
<td>*98</td>
</tr>
<tr>
<td>Direct Dial Prefix</td>
<td>*</td>
</tr>
<tr>
<td>DND Activate</td>
<td>*78</td>
</tr>
<tr>
<td>DND Deactivate</td>
<td>*79</td>
</tr>
<tr>
<td>DND Toggle</td>
<td>*76</td>
</tr>
<tr>
<td>Email completed dictation
</td>
<td>*35</td>
</tr>
<tr>
<td>Findme Follow Toggle</td>
<td>*21</td>
</tr>
<tr>
<td>In-Call Asterisk Attended Transfer
</td>
<td>*2</td>
</tr>
<tr>
<td>In-Call Asterisk Toggle Call Recording
</td>
<td>##</td>
</tr>
<tr>
<td>Intercom prefix</td>
<td>*80</td>
</tr>
<tr>
<td>My Voicemail</td>
<td>*97</td>
</tr>
<tr>
<td>Park Prefix</td>
<td>*86</td>
</tr>
<tr>
<td>Perform dictation</td>
<td>*34</td>
</tr>
<tr>
<td>Phonebook dial-by-name directory
</td>
<td>411</td>
</tr>
<tr>
<td>Pickup ParkedCall Prefix
</td>
<td>*85</td>
</tr>
<tr>
<td>Queue Callers</td>
<td>*47</td>
</tr>
<tr>
<td>Save Recording</td>
<td>*77</td>
</tr>
<tr>
<td>Set user speed dial</td>
<td>*75</td>
</tr>
<tr>
<td>Speeddial prefix</td>
<td>*0</td>
</tr>
<tr>
<td>User Intercom Allow</td>
<td>*54</td>
</tr>
<tr>
<td>User Intercom Disallow</td>
<td>*55</td>
</tr>
<tr>
<td>ZapBarge</td>
<td>888</td>
</tr>
</table>
</div>
</article>
</body>
</html>
Below is an example of my webpage.

If only you hadn't mentioned Opera in your question, you could have achieved this with pure CSS, without needing any JavaScript, by using the :fullscreen pseudo class. Unfortunately, though Opera doesn't yet support it and IE only introduced it in v11. Check the full support table at caniuse.com.
Here's how you'd do it:
header:-moz-full-screen{
display:none;
}
header:-moz-fullscreen{
display:none;
}
header:-ms-fullscreen{
display:none;
}
header:-webkit-full-screen{
display:none;
}
header:-webkit-fullscreen{
display:none;
}
header:fullscreen{
display:none;
}

Using the Fullscreen API in web browsers
The user could, for instance, exit fullscreen, something that might be
good for you to know. For that we have a fullscreenchange event, that
you can apply both to the element that requested fullscreen, but also
to the document. Then we just detect the fullscreen state and take act
accordingly, like this:
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
}, false);
SRC: http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/

Dynamically bind check boxes and button on click using jQuery

Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.

You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});