JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <a id=cropros>опрос</a>
  
<form id=pool method=post>
    <!--p><input value="" name=v1 id=v1 class="inp2"></input></p>
    <p><input value="" name=v2 id=v2 class="inp2"></input></p>
    <p><input value="add new" name=v3 id=3 class="inp2"></input></p-->
    <p><button type="submit">Нажми на меня!</button></p>
    
</form>
    

</body>

CSS

.deletebutton {
	width: 20px;
	height: 22px;
	cursor: pointer;
	margin: 5px;
	

	background-position: center center;
	background-repeat: no-repeat;
    border: 1px solid red;
	/*position:absolute;
	top: 1px;
	left: 480px;*/
}
p.dd {
border: 1px solid blue;
}
}

JavaScript

$(function () {
    
    
    $('form').hide();
    $('#cropros').click(function(){
        $('form').show();
        addnewinput();
        addnewinput();
        addnewinput();
    });
    
    function addnewinput(){
        var qtyinput = $("#pool input").length;
        //alert(qtyinput);
        $("#pool input:last").val("v"+qtyinput);
   
        qtyinput++;
        //alert(qtyinput);
        $("#pool button").before('<p class="dd" id="inp'+qtyinput+'"><input class="inp2" value="add new'+qtyinput+'" name=v'+qtyinput+'></input><span class="deletebutton" href="zzz"  vali="'+qtyinput+'">x</span></p>'); 
    }
    
    //var lastinput = $("input:last");
    
    $(document).on("click", "input:last",  function () {
            addnewinput();
    });
    
    $(document).on("click", "span.deletebutton",  function () {
       // console.log(this.attr());
        console.log(this);
        
    });
    
      
      

});