如何使用jQuery添加更多字段？

我有3个带有+添加更多按钮的输入字段。我想按+ Add More按钮添加更多字段。

创建新字段时，应该有一个删除按钮以删除新添加的行，并且可以使用+添加更多按钮来创建新行。

为此，我正在使用以下html和jQuery代码，但无法了解如何添加/删除字段！

html和jQuery代码

    
                                
        

            Logger Name
            
        
    
    

        

            Logger Serial Number
            
        
    
    

        

            Modem Serial Number
            
        
    
    

  

    

         

        + Add More
    



$(document).ready(function() {
    $(".add-more").click(function(){ 
        var html = $("#tab_logic").html();
        $(".more-feilds").append(html);        
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents("#tab_logic").remove();
    });
});

更新：

我已经更新了html和jquery代码。现在，我有+添加更多按钮。当我按下按钮时，它会添加3个我想要的新输入字段。但是我想向每个新创建的3个字段添加删除按钮以将其删除。

我怎样才能做到这一点 ？

您可以使用以下逻辑。这将克隆第一个div.after-add-more并在html上添加remove按钮。

PS：我已删除ID，以避免html中的ID重复。此功能不需要此ID属性，希望这不是问题。

$(document).ready(function() {
    $("body").on("click",".add-more",function(){ 
        var html = $(".after-add-more").first().clone();
      
        //  $(html).find(".change").prepend(" 
- Remove");
      
          $(html).find(".change").html(" 
- Remove");
      
      
        $(".after-add-more").last().after(html);
      
     
       
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents(".after-add-more").remove();
    });
});

  
    
                                
        

            Logger Name
            
        
    
    

        

            Logger Serial Number
            
        
    
    

        

            Modem Serial Number
            
        
    
    

        

             

            + Add More