JSFiddle - React, Tailwind, and code Playground

by JohnnyDevv

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <div class="row">

            <div class="col-md-12">
                <form action="" class="form-horizontal" id="newVehicle" method="post" accept-charset="utf-8">
                    <div class="form-group">
                        <label for="inputName" class="col-sm-2 control-label">Nome da viatura</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name" id="inputName" placeholder="Nome da viatura">
                        </div>
                    </div>
                    <div class="form-group specs" data-class="specs">
                        <label for="" class="col-sm-2 control-label">Especificações</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="specs[]">
                                <option></option>
                                <option data-target="new-equip">Novo equipamento</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <div class="btn-group" role="group" aria-label="">
                                <a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a>
                                <a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group equips" data-class="equips">
                        <label for="" class="col-sm-2 control-label">Equipamento</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="equips[]">
        ...

JavaScript

// IIFE - Immediately Invoked Function Expression
(function(yourcode) {

    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);

}(function($, window, document) {

// The $ is now locally scoped

    // Listen for the jQuery ready event on the document

    $(function() {

    });

// The rest of the code goes here!


    $('#newVehicle').on('click', '.btnMinus, .btnNew, .btnPlus',function(event) {
        event.preventDefault();
        /* Act on the event */
        var formGroupClass = $(this).closest('.form-group').attr('data-class');
        console.log($(this).closest('.form-group').attr('class'));
        if($(this).hasClass('btnMinus')) {
            if($(this).closest('.form-group').is('.' + formGroupClass + ':first-child')) {
                return false;
            } else {
                $(this).closest('.form-group').remove();
            }
        }
        if($(this).hasClass('btnPlus')) {
            $(this)
            .closest('.form-group')
            .after('<div class="form-group ' + formGroupClass + '" data-clas="' + formGroupClass + '"></div>')
            .next()
            .append('<label for="" class="col-sm-2 control-label"></label>')
            .append('<div class="col-sm-4"></div>')
            .append('<div class="col-sm-2"></div>')
            .children('div.col-sm-4')
            .append('<select class="form-control" name="' + formGroupClass + '[]"></select>')
            .children('select')
            .append('<option></option>')
            .closest('.form-group')
            .children('div.col-sm-2')
            .append('<div class="btn-group" role="group" aria-label=""></div>')
            .children('.btn-group')
            .append('<a href="" class="btn btn-default btnMinus"><span class="glyphicon glyphicon-minus"></span></a>')
            .append('<a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a>')
            .append('<a...