As you can see i create a function check everytime change room max and placeholder will change:

function CheckGuest(el){
 if(el.value == 'Room2'){
 document.getElementById("bookinfo").max = 10;
 document.getElementById("bookinfo").placeholder = "1-10";

 }else{
  document.getElementById("bookinfo").max = 8;
 document.getElementById("bookinfo").placeholder = "1-8";
 }

}

<select name ="room" onChange="CheckGuest(this)">
   <option value="Room1">Room 1</option>
   <option value="Room2">Room 2</option>
   <option value="Room3">Room 3</option>
   <option value="Room4">Room 4</option>
</select><br>
<label for="guests">Total guests:</label>
<input class = "bookinfo" id="bookinfo"   type="number" name="guests" min = "1" max ="8" placeholder="1-8" required>

What i change:

• Add onChange event for active function everytime you change room
• Add ID to input for select it with javascript
• Create function for change max value and placeholder.

i suggest you to read this website You might not need jQuery

Lets say I got this select tag with 4 rooms:

<select name ="room">
   <option value="Room1">Room 1</option>
   <option value="Room2">Room 2</option>
   <option value="Room3">Room 3</option>
   <option value="Room4">Room 4</option>
</select><br>
<label for="guests">Total guests:</label>
<input class="bookinfo" type="number" name="guests" min="1" max="8" placeholder="1-8" required>

After this tag, I have an input that shows how many guests can be in each room. However, room 2 is for 10 people and not 8. Is there a way I can change this with jquery?