index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="HandheldFriendly" content="True">
    
    <title>Like it Bitch</title>

    <!--
    viewport:
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    webapp:
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon-precomposed" href="icon.png">
    favicon:
    <link rel="icon" href="img/favicon.ico">
    <link rel="icon" type="image/png" href="img/favicon.png">
    -->

    <style type="text/css">

    html, body {
      height: 100%;
      font: 16px/1.5 helvetica, arial, sans-serif;
    }
    *, *:before, *:after {
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box;
    }

    input[type="radio"] {
      display: none;
    }
    
    input[type="radio"]:checked + label {
      color: red;
    }

    .liker {
      display: block;
      margin: 2em;
    }

    .liker > span {
      display: inline-block;
      padding: .5em;
      cursor: pointer;
      transition: all .3s;
      border-radius: 10px;
    }

    .liker > span.selected {
      background-color: #fbb03b;
      color: #ffffff;
    }

    </style>

  </head>
  <body>


<span id="test1">
  <div class="liker" data-value="1">
	  

  </div>
<!--
  <div class="liker" data-value="0"></div>

  <div class="liker" data-value="-1"></div>

  <div class="liker"></div>
  -->
</span>
<!--
<span id="test2">
  <div class="liker"></div>
</span>
-->
<script type="text/javascript" src="likers.js"></script>
<script type="text/javascript">
addLikers( document.getElementById("test1") );
</script>

  </body>
</html>