How to write the Javascript that gives each link a custom URL to jump to on click according to it's child element's text contents?

Hi there, I would like to have custom URLs for a collection of <a> that have quite a lot of elements inside. Rather than making the whole thing custom code. I would like to keep those elements Webflow-editable.

So, I wonder if it is possible:

The below pattern is generated by Webflow Collection:

<!-- example collection item #1 -->
<a href="#" class="relative-url" target="_blank">
  <span id="input01">campfire<span>
  <span id="input02">red<span>
</a>
<!-- example collection item #2 -->
<a href="#" class="relative-url" target="_blank">
  <span id="input01">pepe<span>
  <span id="input02">green<span>
</a>

How to write the custom javascript to formulate an URL for each <a class="relative-url">

<script>
 // use text content of child element id=input01 and id=input02 to 
 // formulate an URL for it's parent div or <a>
 // eg. https://www.domain.com?type=campfire&color=red
 // eg. https://www.domain.com?type=pepe&color=green
</script>

Any good idea? Thanks :pray:t2:

Solution found.

Here shares the solution (jQuery):

<!-- example set one -->
<a href="#" class="relative-url" target="_blank">
  <span class="input01">campfire</span>
  <span class="input02">red</span>
</a>
<!-- example set two -->
<a href="#" class="relative-url" target="_blank">
  <span class="input01">pepe</span>
  <span class="input02">green</span>
</a>
$(".relative-url").each(function () {
  let type = $(this).find(".input01").text();
  let color = $(this).find(".input02").text();
  this.href = `https://www.example.com?type=${type}&color=${color}`;
});

See it in action on codepen:
https://codepen.io/pen/poLGeXj