jquery issue with dynamicaly selected elements

jquery issue with dynamicaly selected elements

i am making a game, and im trying to display healthLost on whichever
javascript object lost that health. here is the relevant part of my
objects code for player
function Player(id) {
this.id = id;
this.displayText = "<img src =
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiwYSsdi_9pipA3_zFprzM5st4vi-z8_HgHoVaq5s2b7QvIMk94Q6sl7kGk-R4YExYJag3rRuNc-5lT6CnpjM9gHYPGjHO8L3vzBW_ohP-IU18iwzzYJeSDxnCR_5HkxXKmDal9t4QDaY/s1600/smileys_001_01.png'"
+
"class='onTop' id='" + this.id + "' alt='you' border='0' />" +
"<div id = '" + this.id + "health' class = 'healthLost hide'></div>";}
and for monsters ( a array of objects)
function createMonster(name,startingPoint,level) {
this.id = "monsters[" + monsterIdPlacholder++ + "]";
this.displayText = "<img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ab_R-iEDkgXQCpzILFqp2JDCKc8jbjThZcCFWDQyo2R58VgdOIzXX2Qqagqmv0xAl24BE25a0M53tMt-a0sedFmzbvIMXgKdXIhhQ7_KSwj_1GKPKA4w9S7YIZ50jVcIa7ddPW2fUQo/s1600/712324538.png'"
+
"alt='bad guy' border='0' id = '" + this.id + "' />" +
"<div id = '" + this.id + "health' class = 'healthLost hide'></div>";
}
CSS for hide:
.hide{
display:none;
}
and in my function attack() i wrote like this
function attack( attacker, defender ) {
//code to calculate healthLost
var displayHealthDivId = defender.id + "health";
console.log( displayHealthDivId );
$( "#" + displayHealthDivId ).removeClass("hide");
$( "#" + displayHealthDivId ).html( healthLost );
});
}
}
now the above jquery works for my player object, but not for my monster
object's, the console.log returns what i expect. so why doesnt it work for
the monsters? and how do i fix this?
what i really want is for the divs to appear then fade upwards, but i will
do that later. however if you could include that in your answer tthat
would be neat.
link here
sorry i wasent able to create a fiddle, too much code, and bugs
(reference-error's since i didnt put in all my code) kept coming up.