How can I compare 2 values from different elements and take action ONLY for elements that have matching values?

Question

I'm almost finished with a script that'll search multiple elements to look for a person's name. If the script finds a match, it SHOULD grab an ID value in that element for ONLY the elements that contain a person's name.

After that, this script should search for a different group of elements, and find their input values. If the input values match the ID values from the previous elements, I'd like to have it change the background color for a child element that shares the same parent as the ones with input values.

Expected outcome : Essentially: Let's say I have 3 items, but only 2 contain the word "Rufio". For only the items that contain "Rufio", those items should have their background color changed.

Current outcome : Instead of changing the background color only for elements that contain "Rufio", the script is currently changing the color for ALL elements.

I'm sure I've got myself lost in all my brackets here, but where am I going wrong?

var checkexist = setInterval(function() {
  var tickets = document.querySelectorAll("[id^=ticket-tip-] > div > ul > li");

  tickets.forEach(ticket => {
    if (ticket.innerHTML.indexOf("Rufio") !== -1) {
      var ticketid = ticket.parentNode.parentNode.parentNode.id;
      var fancyID = ticketid.replace("ticket-tip-", "");
      var mainareas = document.querySelectorAll(
        "[id^=player-ticket-content] > div.ticket-holder > div > ul > li > input"
      );
      var tickethrefs = document.querySelectorAll(
        "[id^=player-ticket-content] > div.ticket-holder > div > ul > li > a"
      );

      mainareas.forEach(mainarea => {
        tickethrefs.forEach(tickethref => {
          if ((mainarea.value = fancyID)) {
            tickethref.style.backgroundColor = "#99ff66";
            console.log(mainarea.value);
          }
        });
      });
    }
  });
  clearInterval(checkexist);
}, 7000);

---

EDITED

HTML snippet below:

 <div id="player-ticket-content"> <button class="btn btn-small" style="display: none; opacity: 1;">Merge</button> <div class="loading" style="opacity: 0; display: none;"> <div class="spinner dotted"></div> </div> <div class="ticket-holder" style="display: block;"> <div class="tooltip-holder"> <ul class="tickets " style="display: block; max-height: 90px; opacity: 1;"> <li> <input type="checkbox" name="ticket[]" value="40070921" disabled="disabled"> <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/40070921" id="ticket-40070921"> <span class="ticket_status_label solved">solved</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 255, 255);"> <i class="icon-star"></i> </span> <span class="subject"><span>hello?</span></span> </a> </li> <li> <input type="checkbox" name="ticket[]" value="39711568" disabled="disabled"> <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/39711568" id="ticket-39711568"> <span class="ticket_status_label closed">closed</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 174, 174);"> 78% </span> <span class="subject"><span>hello again!</span></span> </a> </li> <li> <input type="checkbox" name="ticket[]" value="21875024" disabled="disabled"> <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/21875024" id="ticket-21875024"> <span class="ticket_status_label closed">closed</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 241, 241);"> 44% </span> <span class="subject"><span>woop woop</span></span> </a> </li> </ul> <div class="ticket-tip" id="ticket-tip-40070921" style="top: 24px; left: 3px; display: none;"> <span class="nub"><span></span></span> <div class="comment"> <ul> <li><strong>Date:</strong> Apr 22, 2019</li> <li><strong>Assignee:</strong> Rufio</li> <li><strong>Requester:</strong> Customer</li> </ul> <p>test!</p> </div> </div> <div class="ticket-tip" id="ticket-tip-39711568" style="top: 48px; left: 3px; display: none;"> <span class="nub"><span></span></span> <div class="comment"> <ul> <li><strong>Date:</strong> Mar 26, 2019</li> <li><strong>Assignee:</strong> Rufio</li> <li><strong>Requester:</strong> Customer</li> </ul> <p>hello hello!</p> </div> </div> <div class="ticket-tip" id="ticket-tip-21875024" style="top: 72px; left: 3px; display: none;"> <span class="nub"><span></span></span> <div class="comment"> <ul> <li><strong>Date:</strong> May 28, 2016</li> <li><strong>Assignee:</strong> Robert</li> <li><strong>Requester:</strong> Customer</li> </ul> <p>It's me again! </p> </div> </div> </div> </div> </div> 

Answer 1

(mainarea.value = fancyID) is an assignment. What you want is a comparison. Use (mainarea.value === fancyID) . Plus, you're not considering whether tickethref.id actually is matching fancyID , which just colors all tickethref s.

You need to change the if condition

if ((mainarea.value === fancyID && tickethref.id.includes(fancyID))) {
    tickethref.style.backgroundColor = "#99ff66";
    console.log(mainarea.value);
}

 var checkexist = setInterval(function() { var tickets = document.querySelectorAll("[id^=ticket-tip-] > div > ul > li"); tickets.forEach(ticket => { if (ticket.innerHTML.indexOf("Rufio") !== -1) { var ticketid = ticket.parentNode.parentNode.parentNode.id; var fancyID = ticketid.replace("ticket-tip-", ""); var mainareas = document.querySelectorAll( "[id^=player-ticket-content] > div.ticket-holder > div > ul > li > input" ); var tickethrefs = document.querySelectorAll( "[id^=player-ticket-content] > div.ticket-holder > div > ul > li > a" ); mainareas.forEach(mainarea => { tickethrefs.forEach(tickethref => { if ((mainarea.value === fancyID && tickethref.id.includes(fancyID))) { tickethref.style.backgroundColor = "#99ff66"; console.log(mainarea.value); } }); }); } }); clearInterval(checkexist); }, 100); 

 <div id="player-ticket-content"> <div class="ticket-holder" style="display: block;"> <div class="tooltip-holder"> <ul class="tickets " style="display: block; max-height: 90px; opacity: 1;"> <li> <input type="checkbox" name="ticket[]" value="40070921" disabled="disabled"> <a class="ticket zd" href="https://companyname.zendesk.com/agent/tickets/40070921" id="ticket-40070921"> <span class="ticket_status_label solved">solved</span> </a> </li> <li> <input type="checkbox" name="ticket[]" value="39711568" disabled="disabled"> <a class="ticket zd" href="https://companyname.zendesk.com/agent/tickets/39711568" id="ticket-39711568"> <span class="ticket_status_label closed">closed</span> </a> </li> <li> <input type="checkbox" name="ticket[]" value="21875024" disabled="disabled"> <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/21875024" id="ticket-21875024"> <span class="ticket_status_label closed">closed</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 241, 241);"> 44% </span> <span class="subject"><span>text here!</span></span> </a> </li> </ul> <div class="ticket-tip" id="ticket-tip-40070921" style="top: 22px; left: 3px; display: none;"> <div class="comment"> <ul> <li><strong>Date:</strong> Apr 22, 2019</li> <li><strong>Assignee:</strong> Rufio </li> <li><strong>Requester:</strong> Customer</li> </ul> <p>text here!</p> </div> </div> <div class="ticket-tip" id="ticket-tip-39711568" style="top: 26px; left: 3px; display: none;"> <span class="nub"><span></span></span> <div class="comment"> <ul> <li><strong>Date:</strong> Mar 26, 2019</li> <li><strong>Assignee:</strong> Rufio</li> <li><strong>Requester:</strong> Customer</li> </ul> <p>more text!</p> </div> </div> <div class="ticket-tip" id="ticket-tip-21875024" style="top: 50px; left: 3px; display: none;"> <span class="nub"><span></span></span> <div class="comment"> <ul> <li><strong>Date:</strong> May 28, 2016</li> <li><strong>Assignee:</strong> Robert</li> <li><strong>Requester:</strong> Customer</li> </ul> <p>Oh hey, text!</p> </div> </div> </div> </div> </div> 

I feel your for loops are unnecessary. If you're working with ids, they are supposed to be unique. I've modified it to make it much more simpler. See the tickethref selector.

 var checkexist = setInterval(function() { var tickets = document.querySelectorAll("[id^=ticket-tip-] > div > ul > li"); tickets.forEach(ticket => { if (ticket.innerHTML.indexOf("Rufio") !== -1) { var ticketid = ticket.parentNode.parentNode.parentNode.id; var fancyID = ticketid.replace("ticket-tip-", ""); var tickethref = document.querySelector( `[id^=player-ticket-content] > div.ticket-holder > div > ul > li > a[id=ticket-${fancyID}]` ); if (tickethref) { tickethref.style.backgroundColor = "#99ff66"; } } }); clearInterval(checkexist); }, 100); 

 <div id="player-ticket-content"> <div class="ticket-holder" style="display: block;"> <div class="tooltip-holder"> <ul class="tickets " style="display: block; max-height: 90px; opacity: 1;"> <li> <input type="checkbox" name="ticket[]" value="40070921" disabled="disabled"> <a class="ticket zd" href="https://companyname.zendesk.com/agent/tickets/40070921" id="ticket-40070921"> <span class="ticket_status_label solved">solved</span> </a> </li> <li> <input type="checkbox" name="ticket[]" value="39711568" disabled="disabled"> <a class="ticket zd" href="https://companyname.zendesk.com/agent/tickets/39711568" id="ticket-39711568"> <span class="ticket_status_label closed">closed</span> </a> </li> <li> <input type="checkbox" name="ticket[]" value="21875024" disabled="disabled"> <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/21875024" id="ticket-21875024"> <span class="ticket_status_label closed">closed</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 241, 241);"> 44% </span> <span class="subject"><span>text here!</span></span> </a> </li> </ul> <div class="ticket-tip" id="ticket-tip-40070921" style="top: 22px; left: 3px; display: none;"> <div class="comment"> <ul> <li><strong>Date:</strong> Apr 22, 2019</li> <li><strong>Assignee:</strong> Rufio </li> <li><strong>Requester:</strong> Customer</li> </ul> <p>text here!</p> </div> </div> <div class="ticket-tip" id="ticket-tip-39711568" style="top: 26px; left: 3px; display: none;"> <span class="nub"><span></span></span> <div class="comment"> <ul> <li><strong>Date:</strong> Mar 26, 2019</li> <li><strong>Assignee:</strong> Rufio</li> <li><strong>Requester:</strong> Customer</li> </ul> <p>more text!</p> </div> </div> <div class="ticket-tip" id="ticket-tip-21875024" style="top: 50px; left: 3px; display: none;"> <span class="nub"><span></span></span> <div class="comment"> <ul> <li><strong>Date:</strong> May 28, 2016</li> <li><strong>Assignee:</strong> Robert</li> <li><strong>Requester:</strong> Customer</li> </ul> <p>Oh hey, text!</p> </div> </div> </div> </div> </div>