We Keep Coding

Easier way to display day.js in multiple locations?

I'm currently studying web development and I'm hoping one of you guys may help.
I'm currently coding the mandatory weather app that everyone and his dog has made lol.
My problem is that on the homepage I have 3 cards displaying with 3 different cities.
I want to display the current date underneath each city by using class="date".
But to do it in 3 instances on the same I've had to use date,date2 and date3. Which I'm thinking a for loop or something similar could easily fix rather than defining it 3 times.
Any help appreciated!
Thanks!
HTML
<section class="row">
<h2> Cities</h2>
<section class="row">
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
London
</h3>
<div class="card-body">
<p>
<span id="date" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
Birmingham
</h3>
<div class="card-body">
<p>
<span id="date2" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
Wolverhampton
</h3>
<div class="card-body">
<p>
<span id="date3" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
</section>
</div>
<div class="col-xs-12 col-lg-3">
<h2>Search</h2>
<input class="Search col-12 border-radius pb-1" placeholder="Enter City" id="search">
<ul class="list-group mb-2 pb-2">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<div class="col-xs-9 col-lg-9">
<h2 class="subtitle">Results:</h2>
<!--search results class="results-item"-->
</div>
</section>
JavaScript/JQuery
let nowDate = now.format('D / M / YY')
let date = $('#date')
let date2 = $('#date2')
let date3 = $('#date3')
date.text(nowDate);
date2.text(nowDate);
date3.text(nowDate);

How to get each label and respective li in a div?

I am having below dynamic generated html div.In that i need to get each label and its respective li items.using that label value i need to call a function.But cant able get each value i am getting same value repeatedly.Someone help me to solve.
Html:
<div class="row extra-attri-div">
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="environment">environment</label>
<div class="value">
<ul id="li-environment">
<li>Suburban</li>
<li>Urban</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="income_coarse">income_coarse</label>
<div class="value">
<ul id="li-income_coarse">
<li>Middle Class</li>
<li>Upper Middle Class</li>
<li>Very High Income</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="age_coarse">age_coarse</label>
<div class="value">
<ul id="li-age_coarse">
<li>Child</li>
<li>Middle Aged</li>
<li>Older</li>
<li>Younger</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="family_stage">family_stage</label>
<div class="value">
<ul id="li-family_stage">
<li>Family Mix</li>
<li>Family Unknown</li>
<li>W/ Kids</li>
<li>W/O Kids</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="home_scale">home_scale</label>
<div class="value">
<ul id="li-home_scale">
<li>Low Scale</li>
<li>Medium Scale</li>
<li>Upscale</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="education_imputed">education_imputed</label>
<div class="value">
<ul id="li-education_imputed">
<li>Attended Vocational/Tech</li>
<li>Completed College</li>
<li>Completed Graduate School</li>
<li>Completed High School</li>
</ul>
</div>
</div>
</div>
</div>
Jquery:
$('.extra-attri-div').find('.appendeddiv').each(function(i){
console.log("coming"+i);
console.log($(".extraattrlebl").data('extraatt'));
});

Beccause each time you are calling console.log($(".extraattrlebl").data('extraatt')); jQuery finds the first extraattrlebl in the whole document (not just inside the .appendeddiv ) and returns the value of data-extraatt >> environment
You need to fetch inside each .appendeddiv using the .find()
Try this code:
$('.extra-attri-div').find('.appendeddiv').each(function(i){
console.log("coming"+i);
console.log($(this).find(".extraattrlebl").data('extraatt'));
// select the list
let lis = $(this).find("ul li")
// print each li
lis.each(function() {
console.log($(this).text())
});
console.log("\n\n")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row extra-attri-div">
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="environment">environment</label>
<div class="value">
<ul id="li-environment">
<li>Suburban</li>
<li>Urban</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="income_coarse">income_coarse</label>
<div class="value">
<ul id="li-income_coarse">
<li>Middle Class</li>
<li>Upper Middle Class</li>
<li>Very High Income</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="age_coarse">age_coarse</label>
<div class="value">
<ul id="li-age_coarse">
<li>Child</li>
<li>Middle Aged</li>
<li>Older</li>
<li>Younger</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="family_stage">family_stage</label>
<div class="value">
<ul id="li-family_stage">
<li>Family Mix</li>
<li>Family Unknown</li>
<li>W/ Kids</li>
<li>W/O Kids</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="home_scale">home_scale</label>
<div class="value">
<ul id="li-home_scale">
<li>Low Scale</li>
<li>Medium Scale</li>
<li>Upscale</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="education_imputed">education_imputed</label>
<div class="value">
<ul id="li-education_imputed">
<li>Attended Vocational/Tech</li>
<li>Completed College</li>
<li>Completed Graduate School</li>
<li>Completed High School</li>
</ul>
</div>
</div>
</div>
</div>

jQuery remove text from h1

I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});

you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node

Error with ui-sref

I am getting an error for the first ui-sref inside div with class="row episode-link" although the rest work correctly:
Syntax Error: Token '}' not a primary expression at column 12 of the expression [{seriesId: }] starting at [}].
The same ui-sref if put anywhere in the rest of the html structure works perfectly.
Unable to track the bug. Please Help.
<section>
<div class="container-fluid">
<div class="row episode-link">
<a ui-sref="app.episode({seriesId: {{show._id}}})">
<div class="col-md-12 guide">
<span class="fa fa-chevron-right" style="float: right;"></span>
<h5>Episode Guide</h5>
<p>{{episodes.length}} episodes</p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="seriesjumbo jumbotron">
<div class="row">
<div class="col-md-4 show-img-div align-items-center">
<img class="show-img" src="{{show.poster}}" alt="{{show.seriesName}}">
</div>
<div class="col-md-8">
<h1>{{show.seriesName}}</h1>
<p class="episode-info"><i class="fa fa-calendar" aria-hidden="true"></i><span>{{show.firstAired | date: 'mm/dd/yyyy'}}</span></p>
<p class="info">{{show.network}} <span class="rating"><i class="fa fa-star fa-lg star" aria-hidden="true"></i> {{show.rating}}</span></p>
<p class="info"><em>{{show.airsDayOfWeek}}s, {{show.airsTime}} GMT </em></p>
<div class="cap">
<span class="label label-default" ng-repeat="genre in show.genre">{{genre}}</span>
</div>
<div class="menus"><span class="fa fa-list"></span></div>
<div class="menus"><span class="fa fa-heart"></span></div>
<div class="bookmark"><span class="fa fa-bookmark"></span></div>
<div class="menus"><span class="fa fa-star"></span></div>
<div>
<h3>Overview </h3>
<p>{{show.overview}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<uib-tabset active="active">
<uib-tab index="0" heading="Episodes">
<div class="row">
<div class="col-md-6">
<h5>Seasons</h5>
<ul class="season-list">
<li ng-repeat="season in seasons | orderBy: '-valueOf()'"><a ui-sref="app.episode({seriesId: {{show._id}}, season: {{season}}})">{{season}}</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Years</h5>
<ul class="season-list">
<li ng-repeat="year in firstAired | orderBy:'-toString()'"><a ui-sref="app.episode({seriesId: {{show._id}}, year: {{year}}})">{{year}}</a></li>
</ul>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Fan Arts">
<div ui-view="fan_arts"></div>
</uib-tab>
</div>
</div>
</div>
</section>

Sliding Material Design Card View

I am writing a web ap which looks like this:
Instead of stacking a bunch of cards like in the image above, I want to try and have a slider that when swiped the next card is displayed.
My html looks like this:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
</head>
<body style="">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Statistics</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryCount" class="center-align orange-text text-darken-2">161</h3>
<p class="center-align">Breweries Tried</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">99 bottles of beer on the wall...</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
I tried adding them to an image slider that is offered with materializecss which is what I am using to build my web app but it didnt work.
Anyway to slide them with html5 and css?
Here is a fiddle:
https://jsfiddle.net/mjbbc48h/

You can simply replace the image content in the materializecss slider with your card element. Like so:
<div class="slider">
<ul class="slides">
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
This should give you what you are looking for. Remember to initialize the slider.