JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Clare">Clare</div>
<div id="Cork">Cork</div>
<div id="Limerick">Limerick</div>

<div id="selcountwrapper">
    <div id="selectedCounties" class="selectedCounties"></div>
</div>

CSS

.Claresmall { background-position:  -25px -0px; height: 27px; width: 25px; }
.Corksmall { background-position:  -25px -27px; height: 27px; width: 25px; }
.Limericksmall { background-position:  -125px -0px; height: 36px; width: 25px; }

.sprite-smallcrests { background-image: url(http://danu2.it.nuigalway.ie/09101916/trazoo/demo_3/images/smallcrests.png); }

#selectedCounties .sprite-smallcrests {
    float: left;
    margin-left: -3px;
}

JavaScript

$('#Clare, #Cork, #Limerick').click(function(){
    $('<div/>', {
          title: 'Co. '+this.id,
        'class': this.id+'small sprite-smallcrests'                   }).appendTo('#selectedCounties');
});