JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<div class="row text-center">
			<div class="col-xs-3 btnDiv">
				<!-- <button type="button" class="btn btn-danger">STOP</button> -->
				<!-- <button type="button" class="btn btn-success">PLAY</button> -->
			</div>
			<div class="col-xs-6  bg main-block">
				<div class="bubble"></div>
			</div>
			<div class="col-xs-3 score-place">
				<input id="input" type="text" name="" value="0" placeholder="0">
			</div>
		</div>
	</div>

CSS

.bg {
  height: 400px;
  background-color: #FFF1F1;
  /*display: inline-block;*/
  position: relative;
}
.bubble {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #24E93E;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 0;
}

JavaScript

$(".bubble").click(function() {
    // $("input").append(" <b>Appended text</b>");
    $('#input').val(parseInt($('#input').val()) + 1);
  });