Javascript ile Varolan Html Elementlerini Yeniden Ekleme Nasıl Yapılır?

Ekle butonuna tıkladığımda bu sıradaki elementler bir satır daha oluşacak. Nasıl yapabilirim? Kodlar çok uzun, siz bir örnek verebilirseniz daha iyi olur.

jquery append araştırın hocam

$(document).ready(function() {
    var i = 1;
    $("#add_row").click(function() {
        $('#addr' + i).html("<td class='text-center'><input class='form-control' type='text' name='title[]' required></td><td class='text-center'><input class='form-control' type='text' name='value[]' required></td><td class='text-center'><span class='delete-row'>X</span></td>");
        $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
        i++;
    });
    
});

Kodları kendi html inze göre ayarlamınız gerekli

$("#KlonlanacakDiv").clone().appendTo("#KlonlandıktansonraHangiDivinArkasınaEklenecekseOnunIDsi");

Hocam gelişmiş bir DOM fonksiyonu yazmanız lazım her eklenecekte yeni bir form nesnesi ve onu tetikleyecek olan buton , create element fonsiyonundan yararlanabilirsiniz , yada çoğaltmak yerine aşağıda eklenenleri listeyebilirsiniz yeni eklem yaparkende form sınıflanır

"web kaplanı" sizin yaptığınız için bütün bu kopyalanacakları kapsayan div in id sini ve hangi div içine kopyalanacaksa onun id sini yazdım ama olmadı. Yani
"satirekle" id li div, bütün elementleri kapsıyor. "alan" id li div ise bu div in içine yazacağım.
$("#satirekle").clone().appendTo("#alan");

"hidemyas" sizin dediğinizden çok anlayamadım işin açıkçası. Ne yapmam lazım tam olarak.