See how to do it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

HTML

	
	<section>
		<h2>Tutorial 2</h2>
		<p>Click topping items and add on the hot sausage dog!</p>
		<div class="hot_dog"><img src="images/hot_dog.png"></div>
		<div class="topping_area">
			<img class="topping sauce" src="images/sauce.png">
			<img class="topping avocado" src="images/avocado.png">
			<img class="topping extra" src="images/extra.png">
		</div>
	</section>

CSS

	
	.hot_dog {
		position: absolute;
		left:135px;
		top: 160px;
	}

	.topping_area {
		position: absolute;
	}


	.topping {
		position: absolute;
	}

	.sauce {
		top: 310px;
		left: 0px;
		transform:scale(0.8);
	}

	.avocado {
		top: 330px;
		left: 325px;
		transform:scale(0.8);
	}

	.extra {
		top: 330px;
		left:670px;
		transform:scale(0.8);
	}

	.topping_area img {
		cursor: pointer;
	}

	.topping_added {
		position: absolute;
		top: 62px;
		left: 315px;
		transform:scale(1);
	}

JavaScript

	
	$(".topping_area .topping").click(function(){

	    $(".topping_area .topping").removeClass("topping_added");
	    $(this).addClass("topping_added");

	});