title: Vue JS insert and remove html elements dynamicaly
body: <p><a href="https://i.stack.imgur.com/AO0Dg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AO0Dg.png" alt="enter image description here"></a></p>
  
  <p>I want some thing like this,
  If I hit "<strong>Add Another</strong>" button another set of input boxes should render below this set and this set's "<strong>Add Another</strong>" button should change to the "<strong>Remove This School</strong>" and the maximum number of input rows should limited to the 5.</p>
  
  <p>I hope you understand my requirement.What I want is that the user can enter 5 schools or less than 5 schools.If he accidentally add some wrong information he should have a remove button to remove that record.How do I achieve this using Vue JS.
  This is my code.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;p&gt;Please enter the schools you attained (Maximum five)&lt;/p&gt;
      School Name : &lt;input type="text" name="" value=""&gt;
      Location  : &lt;input type="text" name="" value=""&gt;
      &lt;button type="button" name="button" @click="addAnotherInputBox"&gt;Add Another&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'app',
    data () {
      return {
        counter:0
  
      }
    },
    methods:{
      addAnotherInputBox(){
  
      }
    }
  }
  &lt;/script&gt;
  </code></pre>