jQuery mudando o atributo id de todas as crianças

Eu preciso de alguma ajuda para descobrir como escrever algum código jQuery.

Eu preciso clonar uma tabela dinamicamente onclick. mas então eu preciso mudar os ids da tabela e seus elementos filhos a cada vez. como a tabela pode ter muitos filhos, será difícil fazer isso manualmente. Eu preciso de uma maneira de mudar o id de todos os elementos filho (todos descendentes). Eu sempre adicionarei o contador ao id. (Eu sei que as crianças vão acessar apenas os filhos imediatos, mas eu só queria tentar se isso funciona). Se vocês sabem como isso pode ser feito em qualquer jQuery ou Javascript, por favor me avise.

<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>

questionAnswers(3)

yourAnswerToTheQuestion