If statement does not seem to be working properly

Question

I am working on a real estate site and would like to have specific pages to show properties for rent/sale. I am trying to only show properties that have the "Rent" status, but the if statement seems to just default to else.

Using border styles to visibly see if statements.

web page: http://targetrealtygroupdev.com/rent/

What am I missing?

<div class="property-item">
 <div class="proprty-inner>
  <div class="property-status-bg">
   "Rent"
  </div>
 </div>
</div>

    .one {
     border: 1px solid red;
    }
    .two {
     border: 1px solid blue;
    }   
     <script>
          document.addEventListener("DOMContentLoaded", function(event) { 
            var status = document.getElementsByClassName("property-status-bg");
             for (item of status) { 
              var type = item.innerText;
               if (type == 'Rent') {
                jQuery('.property-item').addClass('one');
               } else {
                jQuery('.property-item').addClass('two');
               }
             }
          });
     </script>

Answer 1

you are changing all jQuery('.property-item') for each item
and .property-status-bg is not only with a simple text == 'Rent' or 'Sale'...
it's look like:

<p>
  <span class="property-status-bg" style="background-color: #888">
    Rent
    <span class="property-arrow" style="border-left-color: #888; border-right-color: #888"></span>
  </span>
</p>

So you have to use the string.include method

try:

document.addEventListener("DOMContentLoaded", function(event)
  { 
  document.querySelectorAll('.property-status-bg').forEach(item =>
    {
    let ClassChoice = item.textContent.includes('Rent')  ? 'one' : 'two'
    item.closest('.property-item').classList.add( ClassChoice )
    })
  })  

Answer 2

You are selecting all the elements, you are not selecting the one you are referencing in the loop.

item.closest('.property-item').classList.add('one');