JSFiddle - React, Tailwind, and code Playground

HTML

<div class="i_find">
        <div class="replaced_link">Goods</div>
		<div class="link_container"><a href="#" class="a_shops">Shops</a></div>
	</div>

CSS

.i_find { 
    text-align: center;
	margin-bottom: 50px;
}

.i_find div {
	display: inline;
}

.i_find a {
	text-decoration: none;
	height: 30px;
	line-height: 30px;
	border-bottom: 1px dotted #585857;
}

.replaced_link {
    background: #f8f400;
	margin-left: 10px;
	padding: 10px 10px 10px 10px;
}

.link_container {
	padding: 10px 10px 10px 10px;
}
.link_container:hover {
	background: #fdfbce;
}

JavaScript

$(document).ready(function() {
$("body").on('click','.a_shops',function(){	
		$('.i_find div:eq(0)').replaceWith('<div class="link_container"><a class="a_goods" href="#">Goods</a></div>');
		$('.i_find div:eq(1)').replaceWith('<div class="replaced_link">Shops</div>');

	});
    
	$("body").on('click','.a_goods',function(){
		
		$('.i_find div:eq(0)').replaceWith('<div class="replaced_link">Goods</div>');
		$('.i_find div:eq(1)').replaceWith('<div class="link_container"><a class="a_shops" href="#">Shops</a></div>');
	});	

});