JSFiddle - React, Tailwind, and code Playground

HTML

<button id="add">Add</button>

<div id="container">
    <img src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" />
    <div class="circle" style="top: 483px; left: 345px;"></div>
    <div class="circle" style="top: 361px; left: 333px;"></div>
    <div class="circle" style="top: 284px; left: 302px;"></div>
    <div class="circle" style="top: 350px; left: 79px;"></div>
    <div class="circle" style="top: 489px; left: 55px;"></div>
</div>

CSS

#container {
    position: relative;
    width: 450px;
    height: 778px;
}
    #container img {
        width: 450px;
        height: 778px;
    }
    #container div.circle {
        display: none;
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        background-color: #000;
    }

JavaScript

$('document').ready( function() {
    
    $('#add').click(function() {
        $('div.circle').show(); 
    });
    
});