JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="movie"> 
    Movies</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> 
    Music</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> 
    Books</label>
  </div>
</fieldset>

CSS

.checkbox {
  position: relative;
}
.circle {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 3px;
  margin-left: 3px;
}
.movie {
  background-color: red;
 }

.music {
  background-color: blue;
}

.books {
  background-color: green;
}

JavaScript

var checkCircle = document.body.querySelectorAll('input[value][type="checkbox"]');
var checkbox = document.body.querySelectorAll('.checkbox');


for (i=0; i < checkbox.length; i++)
{ 
	var inp = checkbox[i].querySelectorAll('input[value][type="checkbox"]')[0]
  var span = document.createElement('i');
  span.className = 'circle ' + inp.value;
  inp.parentNode.insertBefore(span, inp.nextSibling);
}