Javascript - how to copy attribute class that contains a specific word to another div?

I am a novice in Javascript and I have succeeded in copying a set of classes to five new divs.

However, I would like to copy a unique class that contains a particular word to a specific div.

Such as:

Copy tag-street-style to .colour-tag-1
Copy tag-slender to .colour-tag-2
Copy tag-navy to .colour-tag-3
Copy tag-grey to .colour-tag-4
Copy tag-white to .colour-tag-5

I appreciate any assistance.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready( function() { 
  $(".grid-item .grid-meta-wrapper").each(function(e){
    $(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1"></span><span class="product-view-item-colour-tag colour-tag-2"></span><span class="product-view-item-colour-tag colour-tag-3"></span><span class="product-view-item-colour-tag colour-tag-4"></span><span class="product-view-item-colour-tag colour-tag-5"></span></div>');
  });
  $(function() {
    $(".grid-item").each(function(e){
      var colourItemTag1 = $(this).attr('class');
      $(this).find('.colour-tag-1').addClass(colourItemTag1);
    });
    $(".grid-item").each(function(e){
      var colourItemTag2 = $(this).attr('class');
      $(this).find('.colour-tag-2').addClass(colourItemTag2);
    });
    $(".grid-item").each(function(e){
      var colourItemTag3 = $(this).attr('class');
      $(this).find('.colour-tag-3').addClass(colourItemTag3);
    });
    $(".grid-item").each(function(e){
      var colourItemTag4 = $(this).attr('class');
      $(this).find('.colour-tag-4').addClass(colourItemTag4);
    });
    $(".grid-item").each(function(e){
      var colourItemTag5 = $(this).attr('class');
      $(this).find('.colour-tag-5').addClass(colourItemTag5);
    });
  });
     });
     </script>

<div class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
  <section class="grid-meta-wrapper">
    <div class="grid-main-meta">
      <div class="grid-title"> T-Shirt </div>
      <div class="grid-prices">
        <div class="product-price">
          <span>12.99</span>
        </div>
      </div>
    </div>
    <div class="grid-meta-status"></div>
  </section>
</div

Solution

I have created a snippet to solve the issue. To make things visible, I created some custom CSS, which is only useful for the purpose of seeing that the answer works, of course, you will use your own CSS instead. The idea I have been applying was to create an object called classMap which consists of key-value pairs, the keys being the class names to be added and the values being the selectors where we wanted them to be added. Then, I looped this object by key and applied to each element represented by the selector in the value the class represented by the class name in the key.

$(document).ready( function() { 
  $(".grid-item .grid-meta-wrapper").each(function(e){
    $(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1">tag1</span><span class="product-view-item-colour-tag colour-tag-2">tag2</span><span class="product-view-item-colour-tag colour-tag-3">tag3</span><span class="product-view-item-colour-tag colour-tag-4">tag4</span><span class="product-view-item-colour-tag colour-tag-5">tag5</span></div>');
  });
  let classMap = {
    "tag-street-style": ".colour-tag-1",
    "tag-slender": ".colour-tag-2",
    "tag-navy": ".colour-tag-3",
    "tag-grey": ".colour-tag-4",
    "tag-white": ".colour-tag-5",
  };
    
  for (let cls in classMap) {
      document.querySelector(classMap[cls]).classList.add(cls);
  }
});

.tag-street-style {
    background-color: purple;
}

.tag-slender {
    background-color: red;
}

.tag-navy {
    background-color: blue;
}

.tag-grey {
    background-color: grey;
}

.tag-white {
    background-color: black;
    color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
  <section class="grid-meta-wrapper">
    <div class="grid-main-meta">
      <div class="grid-title"> T-Shirt </div>
      <div class="grid-prices">
        <div class="product-price">
          <span>12.99</span>
        </div>
      </div>
    </div>
    <div class="grid-meta-status"></div>
  </section>
</div>
<br><br><br>