Bootstrap5 tab content on second tab creates unlimited white space - javascript

in my project I want to show statistics for the current month and the current year. To split this statistics I created a card with tabs that split month and year.
The month tab is loaded as default. If i now go on the year tab everything is loading but then it will load unlimited empty "stuff / white data" (I don't know how to explain it better), and you can't use this tab because the site will be bigger and bigger. There is also no error in the
This has first been poped up after I changed alle my charts (chart.js) to an dynamic way that you can go e.g. to the next month or the month before. If I load all charts with "fixed" data then the tab works correctly.
What is the problem?
Actual look:
How it has to be looked:
After some testing i see this:
Code snippet:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-header">
<div>
<ul class="nav nav-pills nav-fill mt-4" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-bs-toggle="tab" href="#Month" role="tab">
<span><strong>Current Month</strong></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#Year" role="tab">
<span><strong>Current Year</strong></span>
</a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="month"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-month" id="last-month"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-month" id="current-month">Current Month</button>
<button class="btn btn-info next-month" id="next-month"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="monthly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="monthy_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="monthly_training_days"></h2>
<h2 class="card-title text-white" id="monthly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="monthy_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="monthly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Year" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="year"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-year" id="last-year"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-year" id="current-year">Current Year</button>
<button class="btn btn-info next-year" id="next-year"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="yearly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="yearly_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="yearly_training_days"></h2>
<h2 class="card-title text-white" id="yearly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="yearly_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="yearly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


After a lot of researching and reading i found the solution for this problem.
The problem occurs because of the hidden content from the hidden tab, which is realized in Bootstrap via "display: none".
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none; /* this is the problem */
}
To fix this problem you can use height: 0 and overflow-y: hidden to this . Now the charts will stay in place and no empty random space will created.
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}


It will take a little minute to go through that line by line but some of the problem is sure to be your structure of Rows and Columns. I noticed this in the first few lines - Just inside the tab-content is this...
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
With Bootstrap you're not really meant to have the Row's inside the Column's and I think what's happening is that the un-natural layout of the code is creating errors like the one you see. This answer does not discover where your white-space is coming from but I do suspect that fixing the layout of the code will also fix the white-space.

Related

How can i generate every 3 days of the month?

Can someone help me in date.js or javascript, I want to generate every 3 days of the month but the weekends is not included. from there, I want to pass the generated dates in my view in form of list groups. Here are my codes so far. Thank you.
JS:
$( document ).ready(function() {
var firstDay = Date.parse("t + 1d");
var secondDay = Date.parse("t + 2d");
var thirdDay = Date.parse("t + 3d");
console.log(firstDay);
console.log(secondDay);
console.log(thirdDay);
});
In my view:
#extends('layouts.app')
#section('content')
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<h4><i class="fa fa-calendar-check-o" aria-hidden="true"></i> <b>PICK DATE</b></h4>
</div>
<div class="card-body">
<b><h5><div class="card-header" id="decors_month"></div></h5></b>
<ul class="list-group list-group-horizontal mt-3">
<li class="list-group-item list-group-item-success text-wrap text-center">01-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<li class="list-group-item list-group-item-success text-wrap text-center">02-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<li class="list-group-item list-group-item-success text-wrap text-center">03-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<ul class="float-end"><button type="button" class="btn btn-success "><i class="fa fa-hand-o-left" aria-hidden="true"></i> Pick</button></ul>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<h4><i class="fa fa-graduation-cap" aria-hidden="true"></i> <b>MODULE DATES</b></h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
#endsection
I am using Laravel 6. Thank you.

Stylesheet is not getting linked when using EJS

I have this code, for my ejs page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="img/logo/logo.png" rel="icon">
<title>RuangAdmin - Dashboard</title>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/ruang-admin.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon">
<img src="img/logo/logo2.png">
</div>
<div class="sidebar-brand-text mx-3">RuangAdmin</div>
</a>
<hr class="sidebar-divider my-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<hr class="sidebar-divider">
<div class="sidebar-heading">
Features
</div>
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseBootstrap"
aria-expanded="true" aria-controls="collapseBootstrap">
<i class="far fa-fw fa-window-maximize"></i>
<span>Bootstrap UI</span>
</a>
<div id="collapseBootstrap" class="collapse" aria-labelledby="headingBootstrap" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Bootstrap UI</h6>
<a class="collapse-item" href="alerts.html">Alerts</a>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="dropdowns.html">Dropdowns</a>
<a class="collapse-item" href="modals.html">Modals</a>
<a class="collapse-item" href="popovers.html">Popovers</a>
<a class="collapse-item" href="progress-bar.html">Progress Bars</a>
</div>
</div>
</li>
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people
say this to all dogs, even if they aren't good...</div>
<div class="small text-gray-500">Jaenab · 2w</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks fa-fw"></i>
<span class="badge badge-success badge-counter">3</span>
</a>
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">
Task
</h6>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Design Button
<div class="small float-right"><b>50%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Make Beautiful Transitions
<div class="small float-right"><b>30%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Create Pie Chart
<div class="small float-right"><b>75%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">View All Taks</a>
</div>
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img class="img-profile rounded-circle" src="img/boy.png" style="max-width: 60px">
<span class="ml-2 d-none d-lg-inline text-white small">Maman Ketoprak</span>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- Topbar -->
<!-- Container Fluid-->
<div class="container-fluid" id="container-wrapper">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
</ol>
</div>
<div class="row mb-3">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Earnings (Monthly)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Annual) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Sales</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">650</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
<span>Since last years</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-shopping-cart fa-2x text-success"></i>
</div>
</div>
</div>
</div>
</div>
<!-- New User Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">New User</div>
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">366</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 20.4%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-info"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Pending Requests Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Pending Requests</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
<span>Since yesterday</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-warning"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Area Chart -->
<div class="col-xl-8 col-lg-7">
<div class="card mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Monthly Recap Report</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Dropdown Header:</div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Pie Chart -->
<div class="col-xl-4 col-lg-5">
<div class="card mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Products Sold</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle btn btn-primary btn-sm" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Month <i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Select Periode</div>
<a class="dropdown-item" href="#">Today</a>
<a class="dropdown-item" href="#">Week</a>
<a class="dropdown-item active" href="#">Month</a>
<a class="dropdown-item" href="#">This Year</a>
</div>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<div class="small text-gray-500">Oblong T-Shirt
<div class="small float-right"><b>600 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<div class="small text-gray-500">Gundam 90'Editions
<div class="small float-right"><b>500 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 70%" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<div class="small text-gray-500">Rounded Hat
<div class="small float-right"><b>455 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 55%" aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<div class="small text-gray-500">Indomie Goreng
<div class="small float-right"><b>400 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<div class="small text-gray-500">Remote Control Car Racing
<div class="small float-right"><b>200 of 800 Items</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="card-footer text-center">
<a class="m-0 small text-primary card-link" href="#">View More <i
class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<!-- Invoice Example -->
<div class="col-xl-8 col-lg-7 mb-4">
<div class="card">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Invoice</h6>
<a class="m-0 float-right btn btn-danger btn-sm" href="#">View More <i
class="fas fa-chevron-right"></i></a>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Item</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>RA0449</td>
<td>Udin Wayang</td>
<td>Nasi Padang</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>Detail</td>
</tr>
<tr>
<td>RA5324</td>
<td>Jaenab Bajigur</td>
<td>Gundam 90' Edition</td>
<td><span class="badge badge-warning">Shipping</span></td>
<td>Detail</td>
</tr>
<tr>
<td>RA8568</td>
<td>Rivat Mahesa</td>
<td>Oblong T-Shirt</td>
<td><span class="badge badge-danger">Pending</span></td>
<td>Detail</td>
</tr>
<tr>
<td>RA1453</td>
<td>Indri Junanda</td>
<td>Hat Rounded</td>
<td><span class="badge badge-info">Processing</span></td>
<td>Detail</td>
</tr>
<tr>
<td>RA1998</td>
<td>Udin Cilok</td>
<td>Baby Powder</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>Detail</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer"></div>
</div>
</div>
<!-- Message From Customer-->
<div class="col-xl-4 col-lg-5 ">
<div class="card">
<div class="card-header py-4 bg-primary d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-light">Message From Customer</h6>
</div>
<div>
<div class="customer-message align-items-center">
<a class="font-weight-bold" href="#">
<div class="text-truncate message-title">Hi there! I am wondering if you can help me with a
problem I've been having.</div>
<div class="small text-gray-500 message-time font-weight-bold">Udin Cilok · 58m</div>
</a>
</div>
<div class="customer-message align-items-center">
<a href="#">
<div class="text-truncate message-title">But I must explain to you how all this mistaken idea
</div>
<div class="small text-gray-500 message-time">Nana Haminah · 58m</div>
</a>
</div>
<div class="customer-message align-items-center">
<a class="font-weight-bold" href="#">
<div class="text-truncate message-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="small text-gray-500 message-time font-weight-bold">Jajang Cincau · 25m</div>
</a>
</div>
<div class="customer-message align-items-center">
<a class="font-weight-bold" href="#">
<div class="text-truncate message-title">At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis
</div>
<div class="small text-gray-500 message-time font-weight-bold">Udin Wayang · 54m</div>
</a>
</div>
<div class="card-footer text-center">
<a class="m-0 small text-primary card-link" href="#">View More <i
class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--Row-->
<div class="row">
<div class="col-lg-12 text-center">
<p>Do you like this template ? you can download from <a href="https://github.com/indrijunanda/RuangAdmin"
class="btn btn-primary btn-sm" target="_blank"><i class="fab fa-fw fa-github"></i> GitHub</a></p>
</div>
</div>
<!-- Modal Logout -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Ohh No!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to logout?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
</div>
<!---Container Fluid-->
</div>
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>copyright © <script> document.write(new Date().getFullYear()); </script> - developed by
<b>indrijunanda</b>
</span>
</div>
</div>
</footer>
<!-- Footer -->
</div>
</div>
<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/ruang-admin.min.js"></script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="js/demo/chart-area-demo.js"></script>
</body>
</html>
Just a regular page that is called dashboard.ejs. the file structure is like so:
In the views folder, i have this dashboard.ejs page inside of it. in my index.js file, i have this:
//defining applications necessities
const {
    response
  } = require("express");
  var express = require("express");
  const session = require('express-session');
var ibmdb = require("ibm_db");
  const {
    render,
    name
  } = require("ejs");
  const {
    resolveSoa,
    CONNREFUSED
  } = require("dns");
  const {
    Console
  } = require("console");
   const path = require('path');
  
  //DEFINING APP SETTINGS
  const app = express();
  app.set("view engine", "ejs");
  app.use(express.static("public"));
app.use(express.static(__dirname + '/public'));
  app.use("/public/css/images", express.static("./public/css/images"));
  app.use(express.json());
  app.use(
    express.urlencoded({
        extended: true,
    })
  );
problem is, when i run this, and i try to go to dashboard.ejs, it looks like this:
I am not sure why it is not rendering the CSS properly. The CSS is in public/css, and I've defined that route in the index.js file, and it is in the root directory. How can I fix this?

How to Toggle between bootstrap collapse contain data from server

I have this collapse in my Laravel project using data from database :-
<div class="col col-md-5">
<div class="card">
<div class="card-header text-right">
<h4>{{__('home.course_card')}}</h4>
</div>
<div class="card-body">
<div id="accordion" >
<div class="card">
#foreach ($mysection as $section)
<?php $sec_name='home.sec'.$section->section_name ;
$collaps_count++;
?>
<div class="w-100 card-header py-0 px-0" id="" style="border: none">
<button class=" btn w-100 text-right bg-light " type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" >
<h5 class="">{{__($sec_name)}}</div></h5>
</button>
</div>
<div style="height:5px"></div>
#foreach ($course->Lession as $lession)
#if ($section->section_name == $lession->section_name)
<div id="collapseOne" class="collapse <?php if($collaps_count == 1) echo
'show'?>" aria-labelledby="headingOne" data-parent="#accordion">
<div class="flex-row d-flex justify-content-between text-right mx-auto
w-100 py-2">
<div>- {{$lession->$less_lang}}</div>
#if ($lession->id==$order->lession_id)
<div class="text-left ml-2"><i class="material-icons"
style="color:green">visibility</i></div>
#else
<div class="text-left ml-2"><i class="material-icons"
style="color:grey">visibility</i></div>
#endif
</div>
</div>
#endif
#endforeach
#endforeach
</div>
</div>
</div>
</div>
</div>
When I have more than two collapse data the switch between them not work correctly ,when I press in first one both second and third collapse open,
How can I make toggle between many collapse depend on data from server?

I solved first issue which happened as a reason of same id name of collapse ,therefore I used this code to change id names :
$collaps_count++;
$nf = new NumberFormatter("en", NumberFormatter::SPELLOUT);
$numbers_name=$nf->format($collaps_count);
$numbers_name=ucfirst($numbers_name);
$collapse_id='collapse'.$numbers_name;
$heading='heading'.$numbers_name;

How can I access the value of a specific button that has the same classes

I am developing a web app of where the user can search the song lyrics they want. I am using an API for it. Now I can generate 10 songs results, but the problem is when a user click on "get lyrics" button I can not access the value of that specific button's song title. How can I get the specific song title and album name by just clicking the get lyrics button? Here is my final result:
const apiUrl = "https://api.lyrics.ovh/suggest";
const search = document.getElementById("search-btn");
const result = document.getElementById("result");
const text = document.getElementById("text");
const getLyrics = document.getElementsByClassName("get-lyrics");
//search by songs or artist...
function searchSongs(term) {
fetch (`${apiUrl}/${term}`)
.then (response => response.json())
.then (data => {
const lyricsName = document.getElementsByClassName("lyrics-name");
for (let index = 0; index < lyricsName.length; index++) {
const element = lyricsName[index];
element.innerText = data.data[index].album.title;
}
const artist = document.getElementsByClassName("artist");
for (let index = 0; index < artist.length; index++) {
const element = artist[index];
element.innerText = data.data[index].artist.name;
}
document.getElementById("result").style.display = "block";
//console.log(data);
});
}
//event listener to search song or artist
search.addEventListener("click", e => {
//e.preventDefault();
const searchTerm = text.value;
if (!searchTerm) {
alert("please type a song a name");
} else {
searchSongs(searchTerm);
}
})
//event listener to get lyrics
for (let index = 0; index < getLyrics.length; index++) {
const element = getLyrics[index];
element.addEventListener("click", function(){
const title = `${index + 1}`;
})
}
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name"> <span id="artist"></span> <span id="title"></span>
<button id="search-btn" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- search results -->
<div id="result" class="search-result col-md-8 mx-auto py-4">
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsOne" class="lyrics-name">Purple Noon</h3>
<p id="artistOne" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnOne" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTwo" class="lyrics-name">Purple Noon</h3>
<p id="artistTwo" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTwo" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsThree" class="lyrics-name">Purple Noon</h3>
<p id="artistThree" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnThree" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFour" class="lyrics-name">Purple Noon</h3>
<p id="artistFour" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFour" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFive" class="lyrics-name">Purple Noon</h3>
<p id="artistFive" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFive" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSix" class="lyrics-name">Purple Noon</h3>
<p id="artistSix" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSix" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSeven" class="lyrics-name">Purple Noon</h3>
<p id="artistSeven" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSeven" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsEight" class="lyrics-name">Purple Noon</h3>
<p id="artistEight" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnEight" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsNine" class="lyrics-name">Purple Noon</h3>
<p id="artistNine" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnNine" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTen" class="lyrics-name">Purple Noon</h3>
<p id="artistTen" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTen" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
</div>
<!-- === search results === -->
<!-- Single Lyrics -->
<div id="lyrics" class="single-lyrics text-center">
<button class="btn go-back">‹</button>
<h2 class="text-success mb-4">Pentatonix - Na Na Na</h2>
<pre class="lyric text-white">
Wont go whistling like the wind blows,
Looking out my window,
Just to see the shine
Maybe you might call it crazy,
How Im acting lately,
Skipping through the sky
I see so clearly,
Why Im always feeling free.
So I sleep when my dreams,
Looking like reality
(Gonna feel it! Na na na...) x4
Gonna feel it!
I know where the greener grass grows
Youll just have to follow
To the other side
Lets go tiptoe on a tight rope,
Fallings only natural
Just spread your wings and fly
Youll see so clearly,
Why Im always feeling free.
So I sleep when our dreams
Looking like reality
(Gonna feel it! Na na na...) x4
Bring it down like
Ohh way oh
Yeah yeah yeah yeah yeah yeah
Break it down like
Ohh way oh
Yeah, yeah, yeah...
All around like
Ohh way oh
Yeah, yeah, yeah...
Sing it loud like!
Ohh way oh
Ah oo oo ooo
Gonna feel it! (Na na na...)
Make it sound like! (Na na na...)
All around like! (Na na na...)
Sing it loud like! (Na na na...)
Gonna feel like! (Na na na...)
</pre>
</div>
</main>
<!-- Optional JavaScript -->
<script src="app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
</body>
</html>

I just combined the 3 for loops into one.
const apiUrl = "https://api.lyrics.ovh/suggest";
const search = document.getElementById("search-btn");
const result = document.getElementById("result");
const text = document.getElementById("text");
const getLyrics = document.getElementsByClassName("get-lyrics");
//search by songs or artist...
function searchSongs(term) {
fetch (`${apiUrl}/${term}`)
.then (response => response.json())
.then (data => {
const lyricsName = document.getElementsByClassName("lyrics-name");
const getLyrics = document.getElementsByClassName("get-lyrics ");
const artist = document.getElementsByClassName("artist");
for (let index = 0; index < lyricsName.length; index++) {
lyricsName[index].innerText = data.data[index].album.title;
artist[index].innerText = data.data[index].artist.name;
//event listener to get lyrics
getLyrics[index].addEventListener("click", function(){
console.log("Song:"+data.data[index].album.title +" By:"+data.data[index].artist.name);
//getLyricsAPI(title, artist);
});
}
document.getElementById("result").style.display = "block";
//console.log(data);
});
}
//event listener to search song or artist
search.addEventListener("click", e => {
//e.preventDefault();
const searchTerm = text.value;
if (!searchTerm) {
alert("please type a song a name");
} else {
searchSongs(searchTerm);
}
})
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name"> <span id="artist"></span> <span id="title"></span>
<button id="search-btn" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- search results -->
<div id="result" class="search-result col-md-8 mx-auto py-4">
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsOne" class="lyrics-name">Purple Noon</h3>
<p id="artistOne" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnOne" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTwo" class="lyrics-name">Purple Noon</h3>
<p id="artistTwo" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTwo" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsThree" class="lyrics-name">Purple Noon</h3>
<p id="artistThree" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnThree" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFour" class="lyrics-name">Purple Noon</h3>
<p id="artistFour" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFour" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFive" class="lyrics-name">Purple Noon</h3>
<p id="artistFive" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFive" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSix" class="lyrics-name">Purple Noon</h3>
<p id="artistSix" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSix" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSeven" class="lyrics-name">Purple Noon</h3>
<p id="artistSeven" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSeven" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsEight" class="lyrics-name">Purple Noon</h3>
<p id="artistEight" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnEight" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsNine" class="lyrics-name">Purple Noon</h3>
<p id="artistNine" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnNine" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTen" class="lyrics-name">Purple Noon</h3>
<p id="artistTen" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTen" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
</div>
<!-- === search results === -->
<!-- Single Lyrics -->
<div id="lyrics" class="single-lyrics text-center">
<button class="btn go-back">‹</button>
<h2 class="text-success mb-4">Pentatonix - Na Na Na</h2>
<pre class="lyric text-white">
Wont go whistling like the wind blows,
Looking out my window,
Just to see the shine
Maybe you might call it crazy,
How Im acting lately,
Skipping through the sky
I see so clearly,
Why Im always feeling free.
So I sleep when my dreams,
Looking like reality
(Gonna feel it! Na na na...) x4
Gonna feel it!
I know where the greener grass grows
Youll just have to follow
To the other side
Lets go tiptoe on a tight rope,
Fallings only natural
Just spread your wings and fly
Youll see so clearly,
Why Im always feeling free.
So I sleep when our dreams
Looking like reality
(Gonna feel it! Na na na...) x4
Bring it down like
Ohh way oh
Yeah yeah yeah yeah yeah yeah
Break it down like
Ohh way oh
Yeah, yeah, yeah...
All around like
Ohh way oh
Yeah, yeah, yeah...
Sing it loud like!
Ohh way oh
Ah oo oo ooo
Gonna feel it! (Na na na...)
Make it sound like! (Na na na...)
All around like! (Na na na...)
Sing it loud like! (Na na na...)
Gonna feel like! (Na na na...)
</pre>
</div>
</main>
<!-- Optional JavaScript -->
<script src="app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
</body>
</html>

You can pass the event object into your event listener so you will get the which element is clicked. In event listener you can check element's id or what attribute you want to look. If you change the ids of buttons you will get the song information from the buttons.
for (let index = 0; index < getLyrics.length; index++) {
const element = getLyrics[index];
element.addEventListener("click", function(event){
console.log(event.target.getAttribute('id'))
const title = `${index + 1}`;
})
}

How can I put the icon and tag in the same line?

The icon and the word hi can not be put into the same line
<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet"/>
<div class="row">
<div class="col">
<h5 class="title">hi</h5>
</div>
<i class="icon ion-ios-heart"></i>
</div>
Thanks!!

Method 1 - CSS
<div class="row">
<div class="col">
<span class="item">
<h5 style="display:inline" class="title">hi</h5>
<i class="icon ion-ios-heart"></i>
</span>
</div>
</div>
Method 2 - In same column
<div class="row">
<div class="col">
<h5 class="title">hi<i class="icon ion-ios-heart"></i></h5>
</div>
</div>
Method 3 - In two columns in same row
<div class="row">
<div class="col">
<h5 class="title">hi</h5>
</div>
<div class="col">
<i class="icon ion-ios-heart"></i>
</div>
</div>

h5 will display as a block, so it has its own line.
Should work with the icon inside the h5 tags, though.

Categories

Resources