alpine.js - Create repetitive form elements using JavaScript or alpineJS

Question

Is there a way to get the HTML content duplicated replacing rice with every element of the foods array without using document.write or even jQuery ? Is innerHTML the only way out ? Maybe this is possible to achieve using a reactive library like alpineJS ? (I can't use npm etc)

let food = ['rice', 'wheat', 'ragi', 'maida', 'red gram dhal', 'black gram dhal', 'bengal gram', 'horse gram', 'drumstick leaves', 'cabbage', 'manathakali', 'curry leaves', 'carrot', 'beetroot', 'potato', 'yam', 'Beans', 'brinjal', 'cauliflower', 'ladies finger', 'bitter gourd', 'tomato', 'apple', 'banana', 'grapes', 'guava', 'orange', 'cow milk', 'curd', 'butter milk', 'ghee', 'butter', 'paneer', 'chicken', 'mutton', 'egg', 'fish', 'almond', 'cashew nut', 'sesame', 'ground nut', 'coconut', 'coconut oil', 'sunflower oil', 'gingelly oil', 'groundnut oil', 'palm oil', 'sugar', 'jaggery', 'honey'];

<div class="form-group row">
    <label for="what-beverage" class="col-sm-4 col-form-label">Rice</label>
    <div class="col-sm-8 mt-2">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-daily" value="daily" />
            <label class="form-check-label" for="rice-daily">Daily</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-weekly" value="weekly" />
            <label class="form-check-label" for="rice-weekly">Weekly</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-fortnightly" value="fortnightly" />
            <label class="form-check-label" for="rice-fortnightly">Fortnightly</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-occasionally" value="occasionally" />
            <label class="form-check-label" for="rice-occasionally">Occasionally</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-never" value="never" />
            <label class="form-check-label" for="rice-never">Never included</label>
        </div>
    </div>
</div>

Answer 1

With Alpine.js you could do (assuming you want a frequency radio button for each frequency and food):

<script>
  const foods = [{
    label: 'Rice',
    value: 'rice'
  }, {
    label: 'Wheat',
    value: 'wheat'
  }, 
    // so on for each food
  ];
  const frequencies = [{
    value: 'daily',
    label: 'Daily'
  }, {
    value: 'weekly',
    label: 'Weekly'
  }, {
    value: 'fortnightly',
    label: 'Fortnightly'
  }, {
    value: 'occasionally',
    label: 'Occasionally'
  }, {
    value: 'never',
    label: 'Never'
  }];
</script>
<div x-data="{ foods: foods, frequencies: frequencies }" class="form-group row">
  <div class="col-sm-8 mt-2">
    <template x-for="food in foods">
      <div>
        <label for="what-beverage" class="col-sm-4 col-form-label" x-text="food.label"></label>
        <template x-for="frequency in frequencies">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" x-bind:name="food.value" x-bind:id="`${food.value}-${frequency.value}`" x-bind:value="frequency.value" />
            <label class="form-check-label" x-bind:for="`${food.value}-${frequency.value}`" x-text="frequency.label"></label>
          </div>
        </template>
      </div>
    </template>
  </div>
</div>

I've got a working codepen that you can check out at https://codepen.io/hugodf/pen/yLaRXvm