jQuery меняет атрибут id всех детей

Мне нужна помощь, чтобы понять, как написать код jQuery.

Мне нужно динамически клонировать таблицу по клику. но тогда мне нужно каждый раз менять идентификаторы таблицы и ее дочерних элементов. так как в таблице может быть много детей, это будет трудно сделать вручную. Мне нужен способ изменить идентификаторы всех дочерних (всех потомков) элементов. Я всегда просто добавляю счетчик к идентификатору. (Я знаю, что дети получат доступ только к ближайшим детям, но я просто хотел попробовать, если это сработает). Если вы, ребята, знаете, как это можно сделать в jQuery или Javascript, пожалуйста, дайте мне знать.

<table id="table"> 
    <tr id = "tr" > 
        <td id="td"> 
            <span id="span" value="hiii">hi</span> 
        </td> 
    </tr>
</table> 

<button>Clone</button> 

<script> 
    $("button").click(function () { 
        var table = $("#table").clone(true,true) 
        table.attr( 'id', function() { return this.id +"1"; })    
        alert($("#table1").children()) 
        $("#table1").find(*).attr('id', function() { return this.id +"1"; }) 
        table.appendTo("#table") 
        alert(document.getElementById("tr1")) 
        alert(document.getElementById("span1").value) 
    }); 
</script>

Ответы на вопрос(3)

Ваш ответ на вопрос