title: Add and Remove dom elements using alpine JS
body: <p>I am trying to build a custom add and remove entire div element from an array using alpine JS, here is my code which is working but instead of removing from the exact remove button click it will remove the last one on the array.</p>
  <p>HTML</p>
  <pre><code>&lt;div x-data=&quot;addRemove()&quot;&gt;
    &lt;template x-for=&quot;(field, index) in fields&quot; :key=&quot;index&quot;&gt;
      &lt;div&gt;
        &lt;input type=&quot;text&quot; name=&quot;txt1[]&quot; class=&quot;form-input&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-danger btn-small&quot; @click=&quot;removeField(index)&quot;&gt;&amp;times;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    &lt;button type=&quot;button&quot; @click=&quot;addNewField()&quot;&gt;+ Add Row&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JAVASCRIPT</p>
  <pre><code>return {
          fields: [],
          addNewField() {
              this.fields.push({});
          },
          removeField(index) {
              this.fields.splice(index, 1);
          }
      }
  </code></pre>