Turning a div that includes a ul with a hidden li list from HTM to JS

Question

SO I'm practicing my JS skills and would like to turn my HTML completely or almost completely into JS. I would like to focus on creating these elements and making them work.

 var main = function() { $(document).ready(function () { $('.recipePicContainer').click(function () { $(this).next('.recipes').toggle("slow").toggleClass('selected'); }); }); }; $(document).ready(main); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainContainer col-md-12 col-xs-12"> <div class="checkBoxes"> <span class="recipePicContainer"> <img class="recipe" src="../images/grasshopper-cocktail.jpg" alt="Cocktail"> <div>Cocktail</div> </span> <ul class="recipes"> <li class="ingredient"><input type="checkbox"> ingredient 1</li> <li class="ingredient"><input type="checkbox"> ingredient 2</li> <li class="ingredient"><input type="checkbox"> ingredient 3</li> <li class="ingredient"><input type="checkbox"> ingredient 4</li> <li class="instructions">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div> </div> 

Answer 1

ok, here's the checkbox part figured out:

 $('<input type="checkbox" value="1" />').prependTo(".ingredients");

still need some help with the loop. anyone?