Есть два кода , но если они вместе не работают , по отдельности они работают как нужно .. а вот вместе не хотят .

<script language="javascript" type="text/javascript">
var bbcode = ['B', 'SPAM', 'URL','COL','TR','TD','SPAN'];
 
function font_attr(i) {
     var obj = document.getElementById("step");
     if(typeof(document.selection) != "undefined") { // MSIE, Opera
         obj.focus();
         var sel  = document.selection.createRange();
         sel.text = "["+bbcode[i]+"]" + sel.text + "[/"+bbcode[i]+"]";
     } else if(typeof(obj.selectionStart) != "undefined") {  // FireFox, Chrome, Safari, Opera
          var mid   = obj.value.substring(obj.selectionStart, obj.selectionEnd);
          var first = obj.value.substring(0, obj.selectionStart);
          var last  = obj.value.substring(obj.selectionEnd, obj.value.length);
          obj.value = first + "["+bbcode[i]+"]" + mid + "[/"+bbcode[i]+"]" + last;
     }
}
</script>

<script> 
function insertBB(obj, bb){ 
    obj.focus(); 
    var pos = 0;     
    if(obj.selectionStart) 
        pos = obj.selectionStart; 
    else if(document.selection){ 
        var sel = document.selection.createRange(); 
        sel.moveStart('textedit', -1); 
        pos = sel.text.length; 
    } 

    obj.value = obj.value.substring(0, pos) + '[' + bb + ']' + obj.value.substring(pos); 

    pos += bb.length + 2; 

    if(obj.selectionEnd){ 
        obj.selectionEnd = pos; 
    } 
    else if(obj.createTextRange){ 
        var range = obj.createTextRange(); 
        range.collapse(true); 
        range.moveEnd('character', pos); 
        range.moveStart('character', pos); 
        range.select(); 
    } 
    obj.focus(); 
} 
</script> 

<textarea id="text" id="step"  cols="80" rows="20" name="text"></textarea>

Вот я прописал id="text" id="step" , и они кофликтуют , как исправить ?