JSFiddle - React, Tailwind, and code Playground

HTML

<label for="bg_1">
  <img id="bg_img_select_div-1" class="bg_img" src="http://www.gravatar.com/avatar/29ba0fa62649ce9cb284a97a824a78cd?d=identicon&s=80"  />
  <input id="bg_1" class="check_rad" name="user_bg" checked="checked" type="radio" value="bg_1" />
</label>
<label for="bg_5">
    <img id="bg_img_select_div-2" class="bg_img" src="http://www.gravatar.com/avatar/0043e73d2460fe8ca168acca1672c68e?d=identicon&s=80" />
    <input id="bg_5" class="check_rad" name="user_bg" type="radio" value="bg_5"/>
</label>

CSS

.bg_img { border:5px solid #fff; max-width:100px; height:100px; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s;  -o-transition-duration: 0.2s;}

.bg_img:hover { border:5px solid #fff; box-shadow:0px 1px  10px #ADADAD;}
.active { border:5px solid #333; box-shadow:0px 1px  10px #ADADAD;}

JavaScript

$(function(){
	$(".bg_img").click(function () {
        $(".bg_img").removeClass("active");
		$(this).addClass("active");
	});
});