Cloned Div (jquery) elements only work in Original div

Question

I am using the "cloning" of Divs in jquery, and within them I have other Ivs that when clicking on a button ex.: DIV 1, DIV 2, DIV 3 with javascript shows the content of each div. Only when adding the new div(cloned) when clicking on the button to show the hidden div inside the cloned one appears the change only in the original div, and in the cloned one it is the same..

Using the Jquery "CLONE" command in div "encompasses" only shows/hides in the original and not in the cloned.

GOES BELOW:

<script>
function Listagem(tr) {
 
if (tr == 1) {
document.getElementById('div1').style.display="block";
document.getElementById('div2').style.display="none";
document.getElementById('div3').style.display="none";

}else if (tr == 2) {
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="block";
document.getElementById('div3').style.display="none";
}
else if (tr == 3) {
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="none";
document.getElementById('div3').style.display="block";
}
</script>

<!--  Clona DIVS em jquery-->	
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
 
$("#mais").click(function() {
linha = $("#engloba").html();
$("#conteudo_engloba").append("<br />"+linha+"<br />");
});
 
});
</script>

<!-- botao que "clona" a div (engloba)  -->
<form>
<input type="button" name="" value="+" id="mais">
</form>

<div id="conteudo_engloba">
<div id="engloba">

<a onClick="Listagem(1);" id="btDetalhes" >DIV1</a>
    <a onClick="Listagem(2);" id="btDetalhes" >DIV2</a>
    <a onClick="Listagem(3);" id="btDetalhes" >DIV3</a>

<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>

</div>
</div>

Answer 1

In HTML you cannot have more than one element with duplicated ID. O .getElementById() looks for a single element, and when you have several elements with the same ID the thing ceases to function as you expect.

In addition there is a suggestion of code simplification. So you can add N lines and the display = 'block' or display = 'none' does not need to be so long and too adapted.

Notice that I made changes to HTML and Javascript

function Listagem(index, el) {
    var divs = el.parentElement.querySelectorAll('div');
    for (var i = 0, l = divs.length; i < l; i++) {
        divs[i].style.display = i == index ? 'block' : 'none';
    }
}
$(document).ready(function() {
    var linha = $(".engloba:first").clone();
    $("#mais").click(function() {
        $("#conteudo_engloba").append(linha.clone());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- botao que "clona" a div (engloba)  -->
<form>
    <input type="button" name="" value="+" id="mais">
</form>

<div id="conteudo_engloba">
    <div class="engloba">
        <a onClick="Listagem(0, this);">DIV1</a>
        <a onClick="Listagem(1, this);">DIV2</a>
        <a onClick="Listagem(2, this);">DIV3</a>

        <div>DIV 1</div>
        <div>DIV 2</div>
        <div>DIV 3</div>
    </div>
</div>

jsFiddle: https://jsfiddle.net/pfmfoe30/