Tenho uma div que pode ser "clonada" em jquery, preciso que quando clicar em "Mostrar Produto" apareça a aba do produto e mostra um select, e ao clicar nesse select abra a div GRUPO 1 (dentro da div produto) dentro dessa div abre outro select que abre o SUB GRUPO, e ao clicar em "Mostrar Imposto" abre a div imposto...e que funcione depois de clonar...
Segue código no 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>