javascript - How can I create auto-update HTML counters on number of files in directory and number of times HTML form is submitted?

one text

I am trying to create two HTML counters that dynamically update based on specific scenarios.

Counter 1 needs to automatically update based on the number of files in directory /usr/local/data/. The amount of files in this directory can change so I would like the counter to reflect any changes automatically without me having to set new values for the counter manually.
Counter 2 needs to increment by 1 each time a HTML form is submitted and keep the new value even if the box is restarted. Sort of like a lifetime counter for the number of times the HTML form has been submitted.

I believe this will need to be done through PHP or JS however I am not sure how exactly the syntax would look, my PHP and JS is not the best. Could someone please help me out with this or have any ideas how I might be able to achieve the outcome? Thanks in advance for any help!

I currently have the following manual HTML counters ready to link with the total counter of /usr/loal/data/ and the HTML form I have setup:

For number of files in /usr/local/data/

`<div class="u-align-center u-container-style u-list-item u-repeater-item">
          <div class="u-container-layout u-similar-container u-valign-middle u-container-layout-1">
            <h1 class="u-custom-item u-text u-title u-text-3" data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000">25</h1>
            <p class="u-text u-text-4">Active Streams</p>
          </div>
        </div>`

For total times HTML form has been submitted:

`<div class="u-align-center u-container-style u-list-item u-repeater-item">
<div class="u-container-layout u-similar-container u-valign-middle u-container-layout-2">
<h1 class="u-custom-item u-text u-title u-text-5" data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000">150</h1>
<p class="u-text u-text-6">Total  Streams</p>`

Source