JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div style="width:400px;">
    <input type='text' name='phone[]'>
     <div id='append' data-name='phone[]'>add</div>
    </div>

CSS

#append, #depend {
    float:left;
    padding:5px;
    background:#ccc;
    cursor:pointer;
}

input {
    float:left;
    width:100%;
}

JavaScript

var apd = false;

$('#append').click(function(){   
   var qe = ($('[name="phone[]"]').length); 
    if(qe>0 && apd== false){
        if($(this).after('<div id="depend" data-name='+$(this).attr('data-name')+'>delet</div>')){
        apd = true;
        }
        
    }
    if(qe>4){
     return false;
    } else {
      adinp($(this));
    }
});


$(document).on('click', '#depend', function(){ 
    var lin = $('[name="phone[]"]').last().index();
    if(lin<2){
         $('#depend').remove();
        apd = false;
    } else {
       $('[name="phone[]"]').eq(lin).remove();
    }
    
 });


function adinp (name){
    name.before('<input type="text" name="'+name.attr('data-name')+'">');
}