Initiate the opacity to 0 initially for all images, then display the correct image
$('img').css('opacity',0);
$('.show').on('click', function() {
$('img').css('opacity', 0);
var ind = $(this).closest('.house').parent().index();
$('img').eq(ind).css('opacity', 1).fadeIn('slow');
});
$('.reset').click(function() {
$(this).parent('form').find('input[type="text"]').val('');
});
$('.submit').click(function() {
window.alert("You will be contacted through email shortly in order to process your payment method for the home in Chatham, MA. Thank you for choosing Bazegian Cape Cod Rental Homes!");
});
img {
padding: 29px;
opacity: 0;
width: 250px;
height: 250px;
}
div {
vertical-align: top;
width: 267px;
height: auto;
display: inline-block;
padding: 20px;
margin: 0px;
border-radius: 10px;
border: 1px solid;
}
p {
margin: 5px;
padding: 3px;
background-color: blue;
border-radius: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>Bazegian Cape Cod Rental Homes</h1>
</center>
<div>
<form class="house">
<label><b><u>Chatham, MA</u></b></label><br>
<label><b>$300 a Day</b></label><br>
<label>Name:</label><br>
<input name="nameA" type="text" /><br>
<label>Email Address:</label><br>
<input name="emailA" type="text" /><br>
<label>Phone Number:</label><br>
<input name="phoneA" type="text" /><br>
<label>How many days would you like to rent?</label><br>
<select>
<option value="5-10">5-10 Days</option>
<option value="6-7">10-15 Days</option>
<option value="8-9">15-20 Days</option>
</select>
<input class="show" type="button" value="Show Picture">
<input class="submit" type="button" value="Submit">
<input class="reset" type="button" value="Reset">
</form>
</div>
<div>
<form class="house">
<label><b><u>Wellfleet, MA</u></b></label><br>
<label><b>$250 a Day</b></label><br>
<label>Name:</label><br>
<input name="nameB" type="text" /><br>
<label>Email Address:</label><br>
<input name="emailB" type="text" /><br>
<label>Phone Number:</label><br>
<input name="phoneB" type="text" /><br>
<label>How many days would you like to rent?</label><br>
<select>
<option value="5-10">5-10 Days</option>
<option value="6-7">10-15 Days</option>
<option value="8-9">15-20 Days</option>
</select>
<input class="show" type="button" value="Show Picture">
<input class="submit" type="button" value="Submit">
<input class="reset" type="button" value="Reset">
</form>
</div>
<div>
<form class="house">
<label><b><u>Dennis, MA</u></b></label><br>
<label><b>$350 a Day</b></label><br>
<label>Name:</label><br>
<input name="nameC" type="text" /><br>
<label>Email Address:</label><br>
<input name="emailC" type="text" /><br>
<label>Phone Number:</label><br>
<input name="phoneC" type="text" /><br>
<label>How many days would you like to rent?</label><br>
<select>
<option value="5-10">5-10 Days</option>
<option value="6-7">10-15 Days</option>
<option value="8-9">15-20 Days</option>
</select>
<input class="show" type="button" value="Show Picture">
<input class="submit" type="button" value="Submit">
<input class="reset" type="button" value="Reset">
</form>
</div>
<div>
<form class="provincetown">
<label><b><u>Provincetown, MA</u></b></label><br>
<label><b>$300 a Day</b></label><br>
<label>Name:</label><br>
<input name="nameD" type="text" /><br>
<label>Email Address:</label><br>
<input name="emailD" type="text" /><br>
<label>Phone Number:</label><br>
<input name="phoneD" type="text" /><br>
<label>How many days would you like to rent?</label><br>
<select>
<option value="5-10">5-10 Days</option>
<option value="6-7">10-15 Days</option>
<option value="8-9">15-20 Days</option>
</select>
<input class="show" type="button" value="Show Picture">
<input class="submit" type="button" value="Submit">
<input class="reset" type="button" value="Reset">
</form>
</div>
<img class="img" src="images/chatham.jpg" />
<img class="img" src="images/wellfleet.jpg" />
<img class="img" src="images/dennis.jpg" />
<img class="img" src="images/provincetown.jpg" />
ps: it is highly recommended to refactor and optimize your codebase