jquery clone() + selectType()

Clonar uma div de código html do cakephp, onde cada div possui um combobox, selecionando-o, deveria abrir apenas a div correspondente, mas está abrindo as demais.

by Francis Rodrigues

HTML

<div id="SiteHydroDiv">

  <div class="group">

    <input name="data[SiteHydro][0][id]" value="" id="SiteHydro0Id" type="hidden">
    <div class="header">Estação</div>
    <div class="fields">
      <div class="required">
    <label for="SiteHydro0Name">Nome</label>
    <input name="data[SiteHydro][0][name]" maxlength="255" id="SiteHydro0Name" type="text">
      </div>
      <div class="required">
    <label for="SiteHydro0HydroTypeName">Tipo</label>
    <select name="data[SiteHydro][0][hydro_type_name]" id="SiteHydro0HydroTypeName">
      <option value="0">Selecione...</option>
      <option value="seiom">Seiom Informática</option>
    </select>
      </div>
    </div>

    <div id="hydro_type_seiom">
      <div class="fields">
    <div class="required">Seiom Informática</div>
    <input name="data[SiteHydro][0][SiteHydroSeiom][id]" id="SiteHydro0SiteHydroSeiomId" type="hidden">
    <div class="required">
      <label for="SiteHydro0SiteHydroSeiomEmail">Email</label>
      <input name="data[SiteHydro][0][SiteHydroSeiom][email]" id="SiteHydro0SiteHydroSeiomEmail" type="text">
    </div>
      </div>
    </div>
  </div>

  <div class="actions">
    <ul style="float:left;">
      <li><span class="add" id="adicionar">Adicionar</span></li>
    </ul>
  </div>

</div>

CSS

.header {
    font-weight:normal; font-family:verdana; font-size:14px;
}
.fields {
    font-weight:normal; font-family:arial; font-size:12px;
}
li span {
    cursor:pointer;
    font-weight:normal; font-family:arial; font-size:12px;
}

JavaScript

$(document).ready(function () {
    
    function selectType(o, p) {
        val = o.val();
        if (val) {
            $("div[id^=\'" + p + "\']").each(function() {
                if ($(this).val() != val) {
                    $(this).hide();
                }
            });
            $(this).each(function(){
                $("#" + p + val).show();
            });
        }
    }
    
    $("#SiteCommunicationTypeName").change(function() { selectType($(this), 'communication_'); });
    $("#SiteHydroTypeName").change(function() { selectType($(this), 'hydro_type_'); });

    var idx = $('#SiteHydroDiv > .group').size();
    $('#adicionar').live('click', function(){
        var group = $("#SiteHydroDiv .group:first").clone();
        $(group)
          .find("input[type=hidden]").each(function(){
            $(this)
            .attr("id", $(this).attr("id").replace("0", idx))
            .attr("name", $(this).attr("name").replace("[0]", "[" +idx+ "]"));
            $(this).val( $(this).val().replace(/^[0-9]+$/,"") )
          })
          .end()
          .find("label").each(function(){
            $(this).attr("for", $(this).attr("for").replace("0", +idx));
          })
          .end()
          .find("input").each(function(){
            $(this)
            .attr("id", $(this).attr("id").replace("0", idx))
            .attr("name", $(this).attr("name").replace("[0]", "[" +idx+ "]"))
          })
          .end()
          .find("select").each(function(){
            $(this)
            .attr("id", $(this).attr("id").replace("0", idx))
            .attr("name", $(this).attr("name").replace("[0]", "[" +idx+ "]"))
          });
        $(group).animate({ opacity: "show" }, "slow").appendTo('#SiteHydroDiv').insertBefore('#SiteHydroDiv .actions');
        idx++;
        return false;
    });
    $('#SiteHydroDiv').each(function(selType){
        $("#SiteHydroDiv select").change(function(){
          selectType($(this), "hydro_type_");
        });
       ...