Simple form input repeater with Alpine js 3

index.html

<div class="p-6 m-6 lg:p-12 lg:m-12 bg-gray-50 rounded-lg">

  <div class="flex flex-col lg:flex-row" x-data="{ fields: [''] }">
    <div class="lg:w-1/2 lg:mr-6 lg:mb-0 mb-6">
      <template x-for="(field, index) in fields" :key="index">
        <div class="flex mb-2">
          <input type="text" name="data[]" x-model="fields[index]" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="write text here">
          <button x-show="fields.length > 1" class="ml-2 bg-red-500 hover:bg-red-700 text-white font-bold px-4 rounded focus:outline-none focus:shadow-outline" @click="fields.splice(index, 1)">-</button>
        </div>
      </template>
      <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" @click="fields.push('')">+ Add field</button>
    </div>
    <div class="lg:w-1/2 bg-gray-800 px-6 py-4 rounded shadow-lg">
      <div class="text-md text-gray-500">DATA</div>
      <pre x-text="JSON.stringify(fields, '', 2)" class='text-green-700'></pre>
    </div>
  </div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.1/cdn.js"></script>

simple-form-input-repeater-with-alpine-js-3.markdown

Simple form input repeater with Alpine js 3

A Pen by salmi iliass on CodePen.

License.

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css" rel="stylesheet" />