JSFiddle - React, Tailwind, and code Playground

by evilbloodydemon

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="container-fluid">
	
	<div class="row" id="author-app">
		<div class="col-md-12">


			<button type="button" 
        id="add-author" 
        class="btn btn-primary"
        v-on:click="addAuthor"
        >Добавить</button>


			<div class="author-wrapper">

				<div class="author" v-for="(author, index) in authors" v-bind:class="{highlight: index == hlIndex}">
					<div class="form-group">
						<label :for="'user-name-' + index">Ваше имя {{ index > 0 ? index : '' }}</label>
						<input type="text" class="form-control" :id="'user-name-' + index" placeholder="Введите текст" v-model="author.name">
					</div>
					<div class="form-group">
						<label :for="'user-lastname-' + index">Ваша фамилия {{ index > 0 ? index : '' }}</label>
						<input type="text" class="form-control" :id="'user-lastname-' + index" placeholder="Введите текст" v-model="author.lastname">
					</div>
					<a href="#" class="remove-author" v-on:click="removeAuthor(author)">Удалить</a>
				</div>
			
			</div>


		</div>
	</div>
	
</div>

CSS

.highlight {
  /*background: blue;*/
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

@keyframes blink {
  from {
    background: rgba(255, 255, 0, 1);
  }
  to {
    background: rgba(255, 255, 0, 0);
  }
}

JavaScript

var app = new Vue({
  el: '#author-app',
  data: {
    authors: [{
        name: 'foma',
        lastname: 'kiniaev'
      },
      {
        name: 'bratya',
        lastname: 'medvedovskie'
      },
    ],
    hlIndex: -1
  },
  methods: {
    addAuthor: function() {
      this.authors.push({
        name: '',
        lastname: ''
      });
      this.hlIndex = this.authors.length - 1;
    },
    removeAuthor: function(author) {
      this.authors = this.authors.filter(function(x) {
        return x !== author;
      });
      this.hlIndex = -1;
    }
  }
});