JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-3">
  <h3>Battle System</h3>
  <button type="button" id="battleButton">Battle</button>
  <div id="battle"></div>
</div>

JavaScript

var playerAtk = 5;
var playerDef = 5;
var playerHP = 10;
var monsterAtk = 4;
var monsterDef = 4;
var monsterHP = 8;

var battle = function() {
	while(monsterHP > 0){
		var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2);
		$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
		monsterHP -= playerDam;
		if(monsterHP <= 0) {
			$('#battle').append("<p>You have defeated the monster</p>");
		}
	}
}

$('#battleButton').click(function() {
	battle();
}