JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    <div id="scissor">Scissor</div>
  </li>
  <li>
    <div id="rock">Rock</div>
  </li>
  <li>
    <div id="paper">Paper</div>
  </li>
</ul>
<br />

<div id="myChoice">

</div>

<br />

<div id="counter">
  <p>Scissor Count:</p>
  <div id="scissorCount"></div>
  <p>Rock Count:</p>
  <div id="rockCount"></div>
  <p>Paper Count:</p>
  <div id="paperCount"></div>
</div>

CSS

#myChoice {
  width: 100px;
  height: 20px;
  border: 1px solid black
}

li {
  width: 50px;
  border: 1px solid black;
  padding: 3px;
  margin-bottom: 5px
}

li:hover {
  background-color: gainsboro;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {

  $('#rock').on('click', function() {
    $('#myChoice').text($('#rock').text());
  });

  $('#scissor').on('click', function() {
    $('#myChoice').text($('#scissor').text());
  });

  $('#paper').on('click', function() {
    $('#myChoice').text($('#paper').text());
  });

  // if "text of the div #myChoice" = Scissor -> Scissor Count: 1
});