点击下拉菜单中option，自动增加文本框效果javascript及clone

希望产生的效果是选择others,在下方出现一个文本框
写了一段代码，有很严重的bug,
如果没有选择others,点击add more
新出现的下拉菜单即使选择了others也不会出现文本框

如果一开始就选择了others，点击add more,在新的下拉菜单里选择others，新添加的文本框将出现在第一次出现文本框的下面

代码如下
<li class="msg"><span><font>* </font>Broadband</span>
<div class="wid350">

<select id = selectbroadband placeholder="BB1" name="selectbroadband" onchange="testClk()">

<option selected>BB1</option>
<option>BB2</option>
<option>BB3</option>
<option>BB4</option>
<option>BB5</option>
<option value="others">Others</option>

</select>

<input placeholder="Effective Date" class="edinput" type="text" onfocus="(this.type='date')" id="date">
</div>

<em id="broadband_message"></em>
</li>
<li class="msg" >
<span> </span>

<div class="wid350" id="org">

</div>


<em id="date_message" class="txt_new"></em>
</li>
</div>

<div class="addframe">
</div>

<li class="msg">
<span> </span>
<div class="wid350 myright">
<button type="button" onClick="addmore('broadbandframe')">Add More</button>
</div>
</li>
<script type="text/javascript">
function addmore(classname) {
//$('.'+classname).html($('.'+classname).html() + '<br>' + $('.'+classname).html());
$('.'+classname).next('.addframe').append('<br>' + $('.'+classname).html());


}
</script>
<script type="text/javascript">
function testClk(){

var obj = document.getElementById("org");
var space=document.getElementById("space");
var sel = document.getElementById("selectbroadband");
if (sel.value == "others")
{
var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('name', 'others');
input1.setAttribute('class', 'wid350');
<!--var input2 = document.createElement('span');input1.setAttribute('type', 'text');input1.setAttribute('name', 'space'); input1.setAttribute('value', ' ');space.appendChild(input2);-->
obj.appendChild(input1);

}
}
</script>
不知道该如何解决这个问题，求高手指点，最好能讲详细点