Trying to pull dates from HTML elements with JavaScript and compare them to today’s date and if they are within 30 days change the text color

I am completely new to programming/web development.

What I am trying to do:
I am trying to write JavaScript that will take the date from a webpage or an online spreadsheet and change the color of the text or cell background. The color change will be based on if the date taken from the HTML element or online spreadsheet is within 14 or 30 days from today’s date.

Here is a sample of html elements I would like to work on. I put the dates in various formats to try and work with them.

The Javascript I have written so far I am posting here because I can get the elements to change color but I don’t think the change is actually based on the number of days and I am not able to compare a the number of days I want.

const now = new Date().toDateString();
const date1 = document.getElementById('test1').innerText;

for (let i = 0; i <= test.length; i++) {

  i += test[i];

  if (date1 <= now)
    console.log('safe');
  if (date1 >= now)
    document.getElementsByClassName('test')[0].style.color = 'purple';
};

<div class='test'>
  <p id="test1">February 22 2022</p>
  <br>
  <p id="test">17/2/2022</p>
  <br>
  <p id="test">17 3 2022</p>
  <br>
  <p id="test">17 4 2022</p>
  <br>
</div>