JSFiddle - React, Tailwind, and code Playground

Prototype Framework

by FrictionlessPulley

HTML

<div class="right list">
<input type="button" value="Animal Speak" id="animalSpeak"/>
<input type="button" value="Man Speak" id="manSpeak"/>
</div>
<div id="animalList" class="list"></div>
<div id="manList" class="list"></div>

CSS

.list{border:1px solid #000;border-right:2px solid #CDCDCD;width:30%;height:auto;min-height:300px;diplay:inline;float:left;}
.right{float:right;margin:.1em;padding:1em;}
.speech{background:#F2323D;border:1px solid #000;}

JavaScript

var Animal = function(animalName) {
    this.name = animalName;
};

Animal.prototype = {
    speak: function() {
        var node = $('<div>').addClass('speech').html('<b>' + this.name + '</b> speaking..');
        $('#animalList').append(node);
    }
};

$(function() {
    $('.right').delegate('#animalSpeak', 'click', function() {
        var tagNumber = Math.floor(Math.random() * 200);
        var dog = new Animal('Dog' + tagNumber);
        dog.speak();
    });

    $('.right').delegate('#manSpeak', 'click', function() {
        var tagNumber = Math.floor(Math.random() * 200);

        Animal.prototype.speak = function() {
            var node = $('<div>').addClass('speech').html('<b>' + this.name + '</b> speaking..');
            $('#manList').append(node);

        }
        var man = new Animal('Human' + tagNumber);
        man.speak();
    });
});