How to display only one td (<td>) with the same class - html

Question

I'm struggling with something regarding jQuery, HTML and CSS. I am currently working on a project that is to do with a railway company. I am designing the website, I completed the Home page, but I am now on the tickets page. I am using only HTML,CSS and jQuery to build this site but I just cannot get the tickets page to work properly. I created a ticket section that has a purchase button after you selected if you are an adult, but all the purchase buttons appear if just one of the trips's, can someone please help me out, the purchase button all have the same class name but I know that using $(this).find(".className").show(); always works but it does not seem to now. I also tried $("tr").find(".className").show(); as well as $("this").closest(".classname").show();
// Trips Page Functionality
$("input").click(function() {
$("tr").first(".purchase-button").fadeIn(800);
});
//footer functionality
$("#social-media-group").mouseenter(function() {
$(this).find(".facebook-block").attr("src", "assets/icons/facebook-hover.svg");
});
$("#social-media-group").mouseleave(function() {
$(this).find(".facebook-block").attr("src", "assets/icons/facebook.svg");
});
$("#social-media-group").mouseenter(function() {
$(this).find(".instagram-block").attr("src", "assets/icons/instagram-hover.svg");
});
$("#social-media-group").mouseleave(function() {
$(this).find(".instagram-block").attr("src", "assets/icons/instagram.svg");
});
$("#social-media-group").mouseenter(function() {
$(this).find(".youtube-block").attr("src", "assets/icons/youtube-hover.svg");
});
$("#social-media-group").mouseleave(function() {
$(this).find(".youtube-block").attr("src", "assets/icons/youtube.svg");
});
});
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
#container {
background-color: #000000;
width: 100%;
height: auto;
}
/* Nav-Bar Styling */
#overlay {
position: fixed;
background-color: rgba(203, 187, 42, 0.6);
width: 100%;
z-index: 2;
}
#header {
background-color: black;
height: 150px;
text-align: center;
}
#phone-div {
margin-top: 0px;
position: relative;
right: 350px;
bottom: 100px;
}
h6 {
font-family: 'Prata', serif;
color: white;
font-size: 12px;
}
#email-div {
margin-top: 0px;
position: relative;
left: 350px;
bottom: 150px;
}
#dropdown {
width: 700px;
height: 50px;
margin: 0 auto;
}
#dropdown:hover {
transition: 0.2s;
}
li {
text-decoration: none;
display: inline;
margin-left: 150px;
text-align: center;
position: relative;
left: -50px;
font-family: 'Prata', serif;
position: relative;
top: 14px;
color: white;
}
li:hover {
text-shadow: 2px 2px 5px black;
transition: 0.2s;
cursor: pointer;
}
a {
text-decoration: none;
}
/* End of Nav Bar Styling */
/* Container styling */
h1 {
font-family: 'MonteCarlo', 'sans-serif';
color: white;
position: relative;
top: 220px;
left: 50px;
text-align: center;
font-size: 62px;
}
h2 {
position: relative;
top: 300px;
margin-left: 120px;
margin-right: 120px;
color: white;
font-family: 'Prata', 'sans-serif';
border-radius: 10px;
text-align: center;
}
/* Tickets Section Styling */
#tickets-group {
width: 100%;
height: auto;
margin: 50px;
;
border-radius: 10px;
position: relative;
top: -2200px;
right: 50px;
}
table {
width: 70%;
position: relative;
left: 20px;
border-collapse: collapse;
position: relative;
left: 250px;
background-color: rgba(0, 0, 0, 0.5);
border: none;
}
th {
color: white;
font-family: 'Prata', 'sans-serif';
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
td {
color: white;
text-align: center;
border-right: 3px solid rgba(0, 0, 0, 0.5);
font-family: 'Prata', serif;
}
input:hover {
cursor: pointer;
}
.trips:hover {
cursor: pointer;
background-color: rgba(203, 187, 42, 0.6);
transition: 0.3s;
}
.purchase-button {
text-align: center;
position: relative;
left: 43%;
font-size: 24px;
border-bottom: none;
}
table:hover {
box-shadow: 3px 1px 20px black;
transition: 0.3s ease;
}
h3 {
font-family: 'Prata', serif;
font-size: 24px;
}
.purchase-button:hover {
transition: 0.3s;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5)
}
/* Footer Styling */
#footer {
width: 100%;
float: left;
background-color: #CBBB2A;
overflow: hidden;
}
#social-media-group img {
margin: 20px;
position: relative;
left: 40%;
bottom: 130px;
}
/* End of Footer Styling */
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Wiaan Duvenhage">
<meta name="lecturer" content="Armand Pretorius">
<meta name="assessment" content="Website-root">
<meta name="studentnumber" content="200307">
<meta name="subject" content="DV100">
<meta name="class" content="Class 2">
<link rel="stylesheet" href="../css/trips-page.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=MonteCarlo&family=Prata&display=swap" rel="stylesheet">
<title>Velocity Railways</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../js/data.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div id="container">
<div id="overlay">
<div id="header">
<img src="../assets/logo.svg" alt="velocity_logo" width="200px">
<div id="phone-div">
<img src="../assets/icons/phone .svg" alt="phone_icon" width="30px">
<h6>[phone]</h6>
</div>
<!--Phone Div-->
<div id="email-div">
<img src="../assets/icons/email.svg" alt="phone_icon" width="30px">
<h6>enquiries#velocityrailways.co.za</h6>
</div>
<!--Email Div-->
</div>
<!--Header-->
<div id="dropdown">
<ul>
<a href="pages/trips-page.html">
<li>Trips</li>
</a>
<li>Purchase Tickets</li>
<li>About</li>
</ul>
</div>
<!-- Dropdown -->
</div>
<!--Overlay-->
<div id="inner-container">
<h1>Trips Page</h1>
<div id="introduction-body">
<h2>Welcome To Trips Page Section! Feel free to book your tickets on this page and after selecting it, proceeding to the next page, which is the Purchase Tickets Page!</h2>
</div>
<img class="home-page-image" src="../img/iccup-nNV3q_nhGKQ-unsplash.jpg" width="100%" height="auto">
<div id="tickets-group">
<table>
<tr>
<th>
<h3>FROM</h3>
</th>
<th>
<h3>TO</h3>
</th>
<th>
<h3>DEPART</h3>
</th>
<th>
<h3>ARRIVE</h3>
</th>
<th>
<h3>ADULT</h3>
</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th class="purchase-button">Purchase</th>
</tr>
</table>
</div>
</div>
<div id="footer">
<img src="../assets/logo-footer.svg" alt="velocity_logo" width="200px">
<div id="social-media-group">
<img src="../assets/icons/facebook.svg" alt="facebook-logo" width="50px">
<img src="../assets/icons/instagram.svg" alt="facebook-logo" width="50px">
<img src="../assets/icons/youtube.svg" alt="facebook-logo" width="50px">
</div>
</div>
</div>
<!-- End of Outer Container -->
</body>
</html>

Answer 1

Default your purchase button should be hide by CSS property like .purchase-button{display: none;}.
After that you need to check condition of checkbox is checked or Not as respectively show/hide purchase-button through jQuery functionality.
And need to add colspan="5" attribute on .purchase-button element for standard html structure.
$(document).on('change', 'input[type="checkbox"]', function () {
if($(this).is(':checked')){
$(this).parents('.trips').next().find('.purchase-button').show();
}else{
$(this).parents('.trips').next().find('.purchase-button').hide();
}
});
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
#container {
background-color: #000000;
width: 100%;
height: auto;
}
/* Nav-Bar Styling */
#overlay {
position: relative;
background-color: rgba(203, 187, 42, 0.6);
width: 100%;
z-index: 2;
}
#header {
background-color: black;
height: 150px;
text-align: center;
}
#phone-div {
margin-top: 0px;
position: relative;
}
#email-div {
margin-top: 0px;
position: relative;
}
h6 {
font-family: 'Prata', serif;
color: white;
font-size: 12px;
}
#dropdown {
width: 100%;
max-width: 700px;
height: 50px;
margin: 0 auto;
}
#dropdown:hover {
transition: 0.2s;
}
li {
text-decoration: none;
display: inline;
margin-left: 150px;
text-align: center;
position: relative;
left: -50px;
font-family: 'Prata', serif;
position: relative;
top: 14px;
color: white;
}
li:hover {
text-shadow: 2px 2px 5px black;
transition: 0.2s;
cursor: pointer;
}
a {
text-decoration: none;
}
/* End of Nav Bar Styling */
/* Container styling */
h1 {
font-family: 'MonteCarlo', 'sans-serif';
color: white;
position: relative;
text-align: center;
font-size: 62px;
}
h2 {
font-size: 32px;
position: relative;
color: white;
font-family: 'Prata', 'sans-serif';
border-radius: 10px;
text-align: center;
}
/* Tickets Section Styling */
#tickets-group {
width: 100%;
max-width: 1320px;
height: auto;
margin: 50px auto;
border-radius: 10px;
position: relative;
}
table {
width: 100%;
position: relative;
border-collapse: collapse;
position: relative;
background-color: rgba(0, 0, 0, 0.5);
border: none;
}
th {
color: white;
font-family: 'Prata', 'sans-serif';
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
padding: 10px;
}
td {
color: white;
text-align: center;
border-right: 3px solid rgba(0, 0, 0, 0.5);
font-family: 'Prata', serif;
padding: 10px;
}
input:hover {
cursor: pointer;
}
.trips:hover {
cursor: pointer;
background-color: rgba(203, 187, 42, 0.6);
transition: 0.3s;
}
.purchase-button {
text-align: center;
position: relative;
font-size: 24px;
border-bottom: none;
display: none;
}
table:hover {
box-shadow: 3px 1px 20px black;
transition: 0.3s ease;
}
h3 {
font-family: 'Prata', serif;
font-size: 24px;
}
.purchase-button:hover {
transition: 0.3s;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5)
}
/* Footer Styling */
#footer {
width: 100%;
float: none;
background-color: #CBBB2A;
overflow: hidden;
text-align: center;
padding: 15px;
}
#social-media-group{
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
#social-media-group img {
margin: 10px 10px 0 10px;
position: relative;
}
/* End of Footer Styling */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=MonteCarlo&family=Prata&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
<div id="overlay">
<div id="header">
<img src="../assets/logo.svg" alt="velocity_logo" width="200px">
<div id="phone-div">
<img src="../assets/icons/phone .svg" alt="phone_icon" width="30px">
<h6>[phone]</h6>
</div>
<!--Phone Div-->
<div id="email-div">
<img src="../assets/icons/email.svg" alt="phone_icon" width="30px">
<h6>enquiries#velocityrailways.co.za</h6>
</div>
<!--Email Div-->
</div>
<!--Header-->
<div id="dropdown">
<ul>
<li>Trips</li>
<li>Purchase Tickets</li>
<li>About</li>
</ul>
</div>
<!-- Dropdown -->
</div>
<!--Overlay-->
<div id="inner-container">
<h1>Trips Page</h1>
<div id="introduction-body">
<h2>
Welcome To Trips Page Section! Feel free to book your tickets on this page and after selecting it,
proceeding to the next page, which is the Purchase Tickets Page!
</h2>
</div>
<img class="home-page-image" src="../img/iccup-nNV3q_nhGKQ-unsplash.jpg" width="100%" height="auto">
<div id="tickets-group">
<table>
<tr>
<th><h3>FROM</h3></th>
<th><h3>TO</h3></th>
<th><h3>DEPART</h3></th>
<th><h3>ARRIVE</h3></th>
<th><h3>ADULT</h3></th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th colspan="5" class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th colspan="5" class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th colspan="5" class="purchase-button">Purchase</th>
</tr>
<tr class="trips">
<td>Pretoria</td>
<td>Johannesburg</td>
<td>09:00</td>
<td>10:00</td>
<td><label><input type="checkbox"><span class="checkmark"></span></label></td>
</tr>
<tr>
<th colspan="5" class="purchase-button">Purchase</th>
</tr>
</table>
</div>
</div>
<div id="footer">
<img src="../assets/logo-footer.svg" alt="velocity_logo" width="200px">
<div id="social-media-group">
<img src="../assets/icons/facebook.svg" alt="facebook-logo" width="50px">
<img src="../assets/icons/instagram.svg" alt="facebook-logo" width="50px">
<img src="../assets/icons/youtube.svg" alt="facebook-logo" width="50px">
</div>
</div>
</div>
<!-- End of Outer Container -->

Answer 2

You could select the parent tr with .parents('.trips'), then the next tr with .next() and then the button with .find('.purchase-button'):
$('input[type="checkbox"]').on('click', function() {
$(this).parents('.trips').next().find('.purchase-button').show();
});