JSFiddle - React, Tailwind, and code Playground

by lrunge

HTML

<button name="addDom" id="incrementor" type="button" class="btn btn-block btn-primary btn-lg"><i class="fa fa-plus-circle" aria-hidden="true"></i> Añadir pregunta</button>

JavaScript

var number = 0;
var incrementor = document.getElementById('incrementor');
incrementor.addEventListener('click', plusOne);

function plusOne() {
  number++;
  count.textContent = number.toString();
}

$(document).ready(function() {
       
    $("button[name='addDom']").click(function() {
        var domElement = $('<div class="row"><div class="col-md-9"><div class="box"><div class="box-header with-border"><h3 class="box-title">Row '+number.toString()+'</h3></div><div class="box-body"><div class="box box-solid"><div class="form-group"><label for="exampleInputEmail1">Selecciona el tipo de pregunta</label><select class="form-control input-lg" id="img_change'+number.toString()+'"><option value="5caritas">5 caritas</option><option value="3caritas">3 caritas</option><option value="2caritas">2 caritas</option><option value="opciones">Selección simple</option><option value="nps">Evaluación del 1 al 10</option><option value="texto">Texto libre</option><option value="telefono">Teléfono</option><option value="email">Correo electrónico</option></select></div><div class="form-group"><label for="exampleInputEmail1">Tu pregunta es: </label><input class="form-control input-lg" type="text" placeholder="Escribe tu pregunta"></div></div></div></div></div><div class="col-md-3"><div class="box box-default"><div class="box-header with-border"><i class="fa fa-bullhorn"></i><h3 class="box-title">Image:</h3></div><div class="box-body"><img class="img-responsive" id="changePictureYo'+number.toString()+'" src="https://easycsat.com/adminLib/clients/img/screenshot-5caritas.png" style="max-width: 70px;"/></div></div></div></div><hr>');
        $(this).before(domElement);
        
        $('#img_change'+number.toString()).on('change', function(){

        var img_path = 'https://easycsat.com//adminLib/clients/img/screenshot-' + $(this).val() + '.png';
        $('#changePictureYo'+number.toString()).attr( 'src', img_path );
});
    });
    
    
});