동적 select 를 이용하여 A를 선택하면 B가 바뀌게끔 하는 작업을 진행중입니다.

<code>

 <ul>
 <li><select class="frm_input" onchange="categoryChange(this)" name="wr_10[]">
    <option>선택해주세요.</option>
    <option>A선택</option>
    <option>B선택</option>
    <option>C선택</option>
 </select>
 <select class="frm_input" id="wr_11[]" name="wr_11[]">
    <option>선택해주세요.</option>
 </select>
</li>

 <li><select class="frm_input" onchange="categoryChange(this)" name="wr_10[]">
    <option>선택해주세요.</option>
    <option>A선택</option>
    <option>B선택</option>
    <option>C선택</option>
 </select>
 <select class="frm_input" id="wr_11[]" name="wr_11[]">
    <option>선택해주세요.</option>
 </select>
</li>
</ul>

<script>

function categoryChange(e) {
    var good_a = ["aaa","bbb ccc"];
    var good_b = ["ddd","eee","fff"];
    var good_c = ["ggg","hhh","iii"];

    var target = document.getElementById("wr_11[]");

    if(e.value == "A선택")                        var d = good_a;
    else if(e.value == "B선택")                    var d = good_b;
    else if(e.value == "C선택")            var d = good_c;

    target.options.length = 0;

    for (x in d) {
        var opt = document.createElement("option");
        opt.value = d[x];
        opt.innerHTML = d[x];
        target.appendChild(opt);
    }
}
</script>

</code>

wr_10과 wr_11 필드를 쪼개서 아래로 계속 추가되는 방식입니다.

select 가 한줄만 있을때는 정상적으로 되는데 라인이 추가되면 위에 부분이 변경이 되네요

해당 라인에 select가 변경되게 하고 싶은데 어떻게 해야 할까요?