Open DIV with Select in div Cloned with jquery

Question

I have a div that can be "cloned" in jquery, I need that when clicking on "Show Product" appears the product tab and shows a select, and when clicking on that select open the div GROUP 1 (inside the div product) inside that div opens another select that opens the SUB GROUP, and when clicking on "Show Tax" opens the tax div...and that works after cloning...

Follow code in jsfiddle: https://jsfiddle.net/pfmfoe30/18/

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());
    });
});

a {cursor:pointer;}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 

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

<div id="conteudo_engloba">
    <div class="engloba">
        <a onClick="Listagem(0, this);">Mostra Produto</a> -
        <a onClick="Listagem(1, this);">Mostra Imposto</a>

        <div style="display:none;">
        <h1>Produto</h1>
        <!-- select que abre divs -->
        <select>
          <option value="00">ABRE GRUPO 1</option>
          <option value="01">ABRE GRUPO 2</option>
        </select>
         <!--div que abre via Value 00 -->
            <div id="00"> 
            GRUPO 1
               <!-- select que abre divs dentro da outra div -->
              <select>
               <option>Selecione</option>
              <option value="00">ABRE SUB-GRUPO 1</option>
              <option value="01">ABRE SUB-GRUPO 2</option>
            </select>
                <div>
                   DIV SUB-GRUPO 1                
                <div/>
                 <div>
                   DIV SUB-GRUPO 2                
                <div/>
            </div>
        </div>
         <div id="01"> 
            GRUPO 2
              <select>
               <option>Selecione</option>
              <option value="00">ABRE SUB-GRUPO 1</option>
              <option value="01">ABRE SUB-GRUPO 2</option>
            </select>
                <div>
                   DIV SUB-GRUPO 1                
                <div/>
                 <div>
                   DIV SUB-GRUPO 2                
                <div/>
            </div>
        </div>
        <div><H1>Imposto</H1></div>
    </div>
</div>

Answer 1

You have some errors in HTML, Divs close with </div> and not <div/>. In addition to changing the structure slightly (I have the impression that the structure in the question is wrong) and use

<div class="engloba">
        <a onClick="Listagem(0, this);">Mostra Produto</a> -
        <a onClick="Listagem(1, this);">Mostra Imposto</a>

        <div style="display:none;">
            <h1>Produto</h1>
            <select>
                <option>Selecione</option>

                <option value="00">ABRE GRUPO 1</option>
                <option value="01">ABRE GRUPO 2</option>
            </select>
            <div id="00">  // grupo 1
            ...
            <div id="01">  // grupo 2
            ...

instead of climbing the tree after group 1, then it’s simple and what you need is:

$('#conteudo_engloba').on('change', 'select', function() {
    var val = Number(this.value);
    $(this).nextAll('div').each(function(i) {
        $(this).toggle(val == i);
    });
});

jsFiddle: https://jsfiddle.net/fukeyjp1/1/