AJAX- how to create dynamic checkboxes based on values in database

I'm trying to create dynamic checkboxes using AJAX so that on the basis of categories the number of checkboxes should appear on screen I've sample code in HTML that I want to convert in JS

HTML Code

<div id="check-awesome" class="form-group checkbox">
 <input type="checkbox" id="History">
  <label for="History">
   <span></span>
    <span class="check"></span>
    <span class="box"></span>
      History
  </label>
</div>

AJAX Code

<script>
  $(document).ready(function(){
    $.ajax({
     type:'post',
     url:'/categories',
     contentType:'application/json',
     data: '{"_token":"<?php echo csrf_token() ?>"}',
     success:function(data) {
      for(i=0; i<=data.category_name.length;i ++)
        {
          var checkbox = document.createElement('input');
          checkbox.type="checkbox";
          checkbox.value=data.category_name.category_id;
          checkbox.id=data.category_name[i].category_name;
          var label= document.createElement('label');
          label.htmlFor=data.category_name[i].category_name;
          var span=document.createElement('span');
          label.appendChild(span);
          var span1=document.createElement('span');
          span1.className="check";
          label.appendChild(span1);
          var span2=document.createElement('span');
          span2.className="box";
          label.appendChild(span2);
          label.appendChild(document.createTextNode(data.category_name[i].category_name));
          var div= document.getElementById('check-awesome');
          div.appendChild(label);
          div.appendChild(checkbox);
          }
          return div;
         }
        });
       });
</script>