JSFiddle - React, Tailwind, and code Playground

by Sergio Crisostomo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="coordenateBox">
  <div class="coordenates">
    <input type="text" />, <input type="text" /> 
    <input type="button" class="addRemove remove" value="-" onclick="removeCoordenate()"/><input type="button" class="addRemove add" value="+" onclick="addCoordenate()" />
  </div>
</div>

CSS

.coordenates {
  height: 30px;
  box-sizing: border-box;
  margin: 5px 0;
}

.addRemove {
  width: 30px;
  height: 30px;
  background: #00ae84;
  color: #fff;
  font-size: 120%;
  border: none;
  text-align: center;
  line-height: 25px;
  opacity: 0.6;
  cursor: pointer;
}

.addRemove:hover {
  opacity: 0.9;
}

.addRemove:nth-child(odd) {
  background: #f00;
}

.coordenates input[type="text"] {
  height: 30px;
}

.coordenates input {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
}

JavaScript

var newCoordenate = '<div class="coordenates"><input type="text" />, <input type="text" /> <input type="button" class="addRemove remove" value="-" /><input type="button" class="addRemove add" value="+" /></div>';

function addCoordenate() {
  $(this).closest('.coordenates').after(newCoordenate)
}

function removeCoordenate() {
  $(this).closest('.coordenates').remove();
}
$('.coordenateBox').on('click', '.coordenates .add', addCoordenate);
$('.coordenateBox').on('click', '.coordenates .remove', removeCoordenate);