How do I create an circles orbiting on a ring x9? Javascript?

Question

This is what I have so far:

petsJ = d3.select('.semi-circle-1')
petOwnersJ = d3.select('.semi-circle-2')
circle = d3.select('.circle')


/* Top semi-circle - mouse over*/

petsJ.on("mouseover", function(d){
    d3.select(this)
    .transition().duration(300)
    .style("box-shadow", "0 0 40px gold")
});

petsJ.on("mouseout", function(d){
    d3.select(this)
    .transition().duration(300)
    .style("box-shadow", "none")
});

/* Top semi-circle - click*/

petsJ.on("click", function(d){
    d3.select(this)
    .transition().duration(100)
    .style("background-color", "blue")
    .style('width', '16vw')
    .style('height', '8vw')
    .style('align-items', 'center')
    petOwnersJ
    .style('width', '16vw')
    .style('height', '8vw')
    d3.select('.circle')
    .style('margin-top', '15vh')

});




/* Bottom semi-circle */
petOwnersJ.on("mouseover", function(d){
    d3.select(this)
    .transition().duration(300)
    .style("box-shadow", "0 0 40px gold");
});

petOwnersJ.on("mouseout", function(d){
    d3.select(this)
    .transition().duration(300)
        .style("box-shadow", "none");
});

/* Bottom semi-circle click */

petOwnersJ.on("click", function(d){
    d3.select(this)
    .transition().duration(250)
    .style("background-color", "blue")
    .style('width', '16vw')
    .style('height', '8vw')
    .style('align-items', 'center')
    petsJ            
    .style('width', '16vw')
    .style('height', '8vw')
    d3.select('.circle')
    .style('margin-top', '15vh')
});

.jonsIdea {
    height: 80vh;
    align-items: center;
}

.circle {
    width: 20vw;
    height: 20vw;
    background: white;
    border-radius: 50%;
    margin: auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.semi-circle-1 {
    height: 10vw;
    width: 20vw;
    border-radius: 10vw 10vw 0 0;
    background-color: rgba(100, 200 ,200, 0.3);
    z-index: 2;
    border: red 2px solid;
    position: inherit;
    display: inherit;
    max-width: 20vw;
    max-height: 10vw;
}

.semi-circle-2 {
    height: 10vw;
    width: 20vw;
    border-radius: 10vw 10vw 0 0;
    background-color: rgba(200, 200 ,200, 0.3);
    z-index: 2;
    transform: rotate(180deg);
    border: red 2px solid;
    position: inherit;
    display: inherit;
    max-width: 20vw;
    max-height: 10vw;
}

#pets-J {
   text-align: center;
   margin: auto;
}

#pet-owners-J {
    text-align: center;
    transform: rotate(180deg);
    margin: auto;
}

.orbit {
    width: 30vw;
    height: 30vw;
    border: 1px solid black;
    border-radius: 50%;
    position: absolute;
    animation: rotate1 3s linear infinite;
}

.banfield {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background-color: red;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://d3js.org/d3.v5.js"></script>
<div class="jonsIdea">
        <h1>Please select your businesses</h1>
        <g>
            <div class="circle">
                <div class="semi-circle-1">
                    <section id='pets-J'>
                        <p>x</p>
                        
                    </section>

                </div>
                <div class="semi-circle-2">
                    <section id='pet-owners-J'>
                        <p>y</p>
                       
                    </section>
                </div>
                <div class="orbit">
                    <div class="1"></div>
                    <div class="2"></div>
                    <div class="3"></div>
                    <div class="4"></div>
                    <div class="5"></div>
                    <div class="6"></div>
                    <div class="7"></div>
                    <div class="8"></div>
                    <div class="9"></div>
            </div>
            </div>
        </g>

    </div>

What I am looking to achieve is on the black ring, I would like 9 circles that I can append png/svgs to that are all equally spaces out, and can be scaled up.

I've seen solutions with even numbers like this: http://jsfiddle.net/yxVkk/ but I can't figure out how to split the circle by 9 and place things around it easily without an angle.

I also found this one which would be perfect: How to create circles around a circle with css, javascript? but my coding skills are not strong enough to tackle this alone. For the last 2 hours, I have been trying to get this to work.

Would someone please help me create some JS that will make a ring of circles based on the orbit ring?

Thanks so much