Necesito ayuda para descubrir cómo escribir un código jQuery.

Necesito clonar una tabla dinámicamente en un clic. pero luego necesito cambiar los identificadores de la tabla y sus elementos secundarios cada vez. Como la mesa puede tener muchos hijos, será difícil hacerlo manualmente. Necesito una forma de cambiar los ID de todos los elementos secundarios (todos los descendientes). Siempre añadiré el contador a la identificación. (Sé que los niños solo tendrán acceso a los niños inmediatos, pero solo quería intentarlo si eso funciona). Si ustedes saben cómo se puede hacer esto en jQuery o en Javascript, por favor avísenme.

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