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);