WHat i’m trying to do is match what the db is giving me in my table results, then turning a list group link green, to mark it as completed.

SO my example:

 @if (count($listings))
   <table class="table table-vcenter card-table table-striped">
       <thead>
           <tr> 
              <th style="font-size: 11px; font-family: 'Helvetica Neue', sans-serif">Module</th>
                                                
           </tr>
               </thead>
           <tbody>
              @foreach($listings as $listing)
           <tr>
                                                    
              <td>{{$listing->module}} </span></td>
           </tr>
              @endforeach
           </tbody>
    </table>
        @endif

Then in my list group of links:

 <div class="card-header">
     <h3 class="card-title" style="font-size: 22px">Module</h3>
 </div>
      <div class="list-group list-group-flush list-group-hoverable">
          <div class="list-group-item second-table">
               <div class="row align-items-center">
                    <div class="col text-truncate">
                        <span class="module"><a href="#" class="text-reset d-block">Module Textbook</a></span
                    </div>
      <div class="col-auto">
                       
         </div>
            </div>
               </div>

I trying to turn the link state of even the block or cell in the list group a color if it shows up in the above table td tag.

My script that doesn’t seem to be turning the cell or block a color. Have tried using the a tag and that didn’t work either.

let listings = [];
   document.querySelectorAll('.listings td')
      .forEach(element => listings.push(element.innerText));
          console.log(listings);
   document.querySelectorAll('.module span')
      .forEach(function (el) {
          if (listings.includes(el.innerText)) {
             el.style.background = 'rgb(60, 118, 61, 0.3)';
              }
          });

Is this doable? Thanks for any help!