This is the div on the site for a particular booking - in this example the number 7568 is the tour ID.

<div class="tourmaster-template-wrapper" id="tourmaster-payment-template-wrapper" data-ajax-url="https://www.domainname.co.uk/wp/wp-admin/admin-ajax.php" data-booking-detail="{"tour-id":"7568"} >

For particular tour ID's I would like to hide another div on the page so is there a way to apply CSS to another div on the page if the data-booking-detail includes certain numbers?

So if data-booking-detail includes 7568 then hide div that offers book now and pay later.

First, select the specific element. In your case, that element has the ID tourmaster-payment-template-wrapper and you are looking for the attribute data-booking-detail that contains the value 7568.

This is an example of how you could hide the second element:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#tourmaster-payment-template-wrapper[data-booking-detail*="7568"] + .hide-me {
  display: none;
}

<!-- language: lang-html -->

<div class="tourmaster-template-wrapper" id="tourmaster-payment-template-wrapper" data-ajax-url="https://www.domainname.co.uk/wp/wp-admin/admin-ajax.php" data-booking-detail="{"tour-id":"7568"}"></div>

<div class="hide-me">I should be hidden</div>

<!-- end snippet -->

You can use CSS to hide a div based on the presence of a specific number in the data-booking-detail attribute. However, CSS alone cannot directly manipulate attributes or their values. You'll need to use JavaScript or jQuery to achieve this functionality.

Here's an example of how you can achieve this using JavaScript:

<div id="book-now-div">Offer: Book Now and Pay Later</div>


<script>
  // Get the data-booking-detail attribute value
  var bookingDetail = document.getElementById("tourmaster-payment-template-wrapper").getAttribute("data-booking-detail");

  // Check if the bookingDetail includes the specific tour ID
  if (bookingDetail.includes('7568')) {
    // Hide the div with id "book-now-div"
    document.getElementById("book-now-div").style.display = "none";
  }
</script>