JSFiddle - React, Tailwind, and code Playground

by Shiva meda

HTML

<div class='extdiv'>
<input type="text" class="addmore"  />
</div>

JavaScript

$(document).on("keyup",".extdiv .addmore",function(){
    var dynamic = $(this).attr("class");
    var countoftext = $("."+dynamic).length;  // count of entered value
    var nextcount = $(this).parent(".extdiv").nextAll(".extdiv").length; // finding next class count
    if(this.value.length >= 1 && nextcount == 0 )  // if length of textbox values greate than or equal to one and nextdiv class count is equal to zero
    {
        $(this).after("<button>remove</button>"); // appending remove button to that field
        var extrabox = "<div class='extdiv'><input type='text' class= 'addmore' /></div>" // creating required field
        $(this).parent(".extdiv").after(extrabox); // appending
    }
    if(this.value.length == 0 && nextcount == 1 )
    {
        $(this).next().remove();
        $(this).parent('.extdiv').next().remove();
    
    }
   
    });
    $(document).on("click","button",function(){
    $(this).parent("div").remove();
  
    });