有没有办法只显示一个形状并隐藏前一个形状取决于用户点击的形状？

Question

我正在处理一个应用程序，我正处于每个圆圈代表彩色圆圈形状的部分。具有颜色的形状圆必须在应用程序的末尾显示，具体取决于用户单击的内容。有没有办法显示一个形状而不显示其他形状，然后显示下一个形状但不显示前一个形状？

以下是演示此内容的代码

<p id="circleshapeonesmall"></p>

<p id="circleshapeonenextpart"></p>

#circleshapeonesmall{
position: absolute;
top: 200px;
left: 400px;
height: 20px;
width: 20px;
background-color: #ffcc00;
border-radius: 10px;
}

#circleshapeonenextpart{
position: absolute;
top: 650px;
left: 66px;
height: 30px;
width: 30px;
background-color: #ffcc00;
border-radius: 15px;
}


$(document).ready(function(){
    $('#circleshapeonesmall').show();
    });

$(document).ready(function(){
$('#circleshapeonesmall').hide();
});

$(document).ready(function(){
$('#circleshapeonenextpart').show();
});

<p id="myleast"></p>

    <p id="myleasttext">My Least</p>

$(document).ready(function(){
$('#happy').click(function(){
    $(this).css('color', '#ffcc00');
});

});