JSFiddle - React, Tailwind, and code Playground

by kkdaily

HTML

<form id="meal-plans">
</form>
test

JavaScript

class MealPlan {
	constructor() {
  	this.mealPlans = [
    	{
      	name: 'Vegan',
        price: 20.50
      },
      {
      	name: 'Vegetarian',
        price: 15.00
      },
      {
      	name: 'Pescitarian',
        price: 18.25
      }
    ]
  }
  
  init() {
  	this.createCheckboxes()
  }
  
  createCheckboxes() {
		const mealPlansFormEl = document.getElementById('meal-plans')
 
    this.mealPlans.forEach((plan) => {
    	let checkboxEl = document.createElement('input')
    	let labelEl = document.createElement('label')
      checkboxEl.setAttribute('type', 'checkbox')
      checkboxEl.setAttribute('name', plan.name)
      labelEl.setAttribute('for', plan.name)
      //labelEl.textContent(plan.name)
      mealPlansFormEl.appendChild(checkboxEl)
      mealPlansFormEl.appendChild(labelEl)
    })
  }
}

const mealPlan = new MealPlan()
mealPlan.init()