Ecapsulate existing JavaScript in Tampermonkey to run multiple instances independently at once

Question

I have created simple Tampermonkey JavaScript that renames downloaded file in desktop web browser (Opera 106, 64-bit). My OS is Windows 10 22H2.

On web page I have added urls with specific tags like this:

<a href="https://t1.daumcdn.net/potplayer/beta/PotPlayerSetup64.exe?newfilename=PotPlayerSetup64 v231220" target="_blank" append="ver_potp" class="append_ver" orig_url="https://t1.daumcdn.net/potplayer/beta/PotPlayerSetup64.exe">
  <span class="ico-down"></span>
</a>

<a href="https://www.r-studio.com/downloads/RStudio9.exe?newfilename=RStudio9 v9.3 build 191269.exe" target="_blank" append="ver_rstd" class="append_ver" orig_url="https://www.r-studio.com/downloads/RStudio9.exe">
  <span class="ico-down"></span>
</a>

When I click on both files to download at the same time, my progress bar gets confused, see animation below. It only works if I download one file at a time.

My Tampermonkey script:

// ==UserScript==
// @name         Blog - A better download filenames
// @namespace    http://tampermonkey.net/
// @version      2024.1.17
// @description  Append version number to downloaded file names.
// @author       ME
// @match        http://127.0.0.1/*
// @require      https://code.jquery.com/jquery-3.7.1.min.js
// @grant        GM_download
// ==/UserScript==
/* eslint-disable */

(function() {
  'use strict';

  //var i = 0;
  $(document).ready(function() {

    $("a[orig_url]").click(function(event) {
      event.preventDefault();

      var url = $(this).attr("href");

      const params = new URLSearchParams( url.split('?')[1] );
      var setNewName = params.has('newfilename');
      var newFileName = setNewName ? params.get('newfilename') : "[not set]";

      //alert('Download link is clicked!\nURL:\n' + url + "\nNew filename:\n" + newFileName);

      if( setNewName ) {
        $(this).attr('id', 'blink_me');
        //GM_download($(this).attr("orig_url"), newFileName);

        var prog_id = $(this).attr('append').replace("ver_", 'progress_');
        var prog_id2 = "#"+prog_id+"2";

        var span = $(this).children('span');
        $(span).css('position', 'relative');
        $(span).append( $('<div id="'+prog_id+'2" style="position:absolute; top:0px; left:0px; width: 100%; height: 5px; border: 1px solid #272822; background-color: #D11515;">').html('<div id="'+prog_id+'" style="background: #85C819; height: 100%; width: 0%;"></div>') );

        const download = GM_download({
          url: $(this).attr("orig_url"),
          name: newFileName,
          saveAs: true,
          //onprogress: () => console.log("Progress " + (i++))
          onerror: err => {
              $(prog_id2).remove();
              console.error("error");
          },
          ontimeout: ()=>{
              $(prog_id2).remove();
              console.error("timeout");
          },
          onprogress: function(args) {
              var perc = Math.round(100 * args.position / args.totalSize);
              var u = args.finalUrl.split('/').pop(); console.log( "["+u+"] progress: " + perc + "%" );
              $("#"+prog_id).css("width", perc+"%");
          },
          onload: () => {
              $(prog_id2).remove();
              console.log("Done.");
          }
        });

      }

    });

  });

})();

EDIT: Solved. Script works a expected. But I used one #id on page twice!! OMG/Thank You for enlightenment/.