Converting css into jquery css for checkbox

Question

I'm converting the css into jquery css to change the graphic of checkbox.It's because each checkbox needs to have unique id and without jquery I'll have to write multiple classes for each id manually. To avoid this I wanted to write them in jquery instead. Now, I've created ,but I noticed all of the checkboxes are sticked together on top of each other. I tried adding some margin or <br/> to separate them but couldn't. And I also noticed when I clicked, the background color doesn't change though. But for testing purpose I tried to alert true or false upon click and this works. Could you please check if the css are translated correctly into jquery?

CSS

/* .level_1 */
.level_1 {
  width: 200px;
  height: 28px;
  position: relative;
  background: none;
}
.level_1 label {
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background-color:#D9D9D9;
  border:1px solid #00AAFF;
  border-radius: 50px;
}
.level_1 label:after {
  content: '';
  width: 28px;
  height: 28px;
  position: absolute;
  top: 0px;
  left: 0.1px;
  background: #00B0F0;
   opacity: 0;
  border-radius: 50px;
}
.level_1 label:hover::after {
  opacity: 0.3;
}
.level_1 input[type=checkbox] {
  visibility: hidden;
}
.level_1 input[type=checkbox]:checked + label:after {
  opacity: 1;
}

jQuery

(function($)
{
    $(function()
    {

        //set style for checkbox
        var checkbox= $("input[type=checkbox][id^=level]");
        checkbox.css({
            "width":"200px",
            "height":"28px",
            "position":"relative",
            "background":"none"
            });

        var label= $("label[for='"+$(this).attr("id")+"']");
        var checkbox2= $("input[type=checkbox][id^=level] ~ label");
        checkbox2.css({
            "width": "30px",
            "height": "30px",
            "cursor": "pointer",
            "position": "absolute",
            "left": "4px",
            "top": "4px",
            "background-color":"#D9D9D9",
            "border":"1px solid #00AAFF",
            "border-radius": "50px",
            });


        var checkbox3= $("input[type=checkbox][id^=level] ~ label:after");
        checkbox3.css({
             "content": '',
             "width": "28px",
             "height": "28px",
             "position": "absolute",
             "top": "0px",
             "left": "0.1px",
             "background": "#00B0F0",
             "opacity": 0,
             "border-radius": "50px"
            });

        var checkbox4= $("input[type=checkbox][id^=level] ~ label:hover::after");
       checkbox4.css({
             "opacity": 0.3
            });

        var checkbox5= $("input[type=checkbox][id^=level]");
        checkbox5.css("visibility","hidden");

        //check if checkbox is checked
        var checkbox6= $("input[type=checkbox]").on("click",function()
        {
            var checked= this.checked;
            /*var checkbox7= $("checked ~ label:after");
            checkbox7.css("opacity", 1);*/
            alert(checked);

        });


    });
}(jQuery));

HTML

<table>
<tr>
<td>
<input type="checkbox" class="level" id="level_<?php echo $row['catid'];?>" value="<?php echo $row['catid'];?>">

 <label for="level_<?php echo $row['catid'];?>"><?php echo $row['catname'];?></label>
</td>
</tr>
</table>

Answer 1

I managed to solve my problem like this:

$("#container").delegate("input[type=checkbox]", "change", function () {
    $(this).toggleClass('green');
    $(this).nextAll().toggleClass("green");
});

$(".item").click(function(){
        $(this).next().toggleClass("clipped");
});

CSS #container > div{ -webkit-user-select:none; } #container { background: #edece9; width: 300px; height: 300px; }

#container div {
    height: 40px;
}
.green {
    color: green;
}

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
background: #999;
height: 40px;
width: 40px;
border-radius:20px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 40px;
width: 40px;
border-radius:20px;
display:inline-block;
padding: 0 0 0 0px;
}

</style>

HTML " value=""> ">