Javascript error IE6, IE7, FF2, Opera 9 when two elements have the same id attribute

There is a bug in IE6, IE7, FF2 and Opera 9 that you can see with the following code:

<div id="div1">
	<input type="text" id="test" />
</div>
<div id="div2">
	<input type="text" id="test" />
</div>
<script type="text/JavaScript">
$(function() {

	$("#div1 #test").autocomplete({
		minLength: 0,
		source: [{"value":"1","label":"Test 1","enabled":"1"},{"value":"2","label":"Test 2","enabled":""},{"value":"3","label":"Test 3","enabled":"1"}]
	})
	.data( "autocomplete" )._renderItem = function( ul, item ) {
		var style = '';
		if(item.enabled == false) {
			style= ' style="color: #999;"';
		}
		return $( "<li></li>" )
			.data( "item.autocomplete", item )
			.append( "<a" + style + ">" + item.label + "</a>" )
			.appendTo( ul );
	};
	
	$("#div2 #test").autocomplete({
		minLength: 0,
		source: [{"value":"4","label":"Test 4","enabled":""},{"value":"5","label":"Test 5","enabled":""},{"value":"6","label":"Test 6","enabled":"1"}]
	})
	.data( "autocomplete" )._renderItem = function( ul, item ) {
		var style = '';
		if(item.enabled == false) {
			style= ' style="color: #999;"';
		}
		return $( "<li></li>" )
			.data( "item.autocomplete", item )
			.append( "<a" + style + ">" + item.label + "</a>" )
			.appendTo( ul );
	};

});
</script>

The IE returns the following error:

Error: 'autocomplete(...).data(...)' is null or not an object

In Firefox 2:

Error: $("#div2 #test").autocomplete({minLength:0, source:[{value:"4", label:"Test 4", enabled:""}, {value:"5", label:"Test 5", enabled:""}, {value:"6", label:"Test 6", enabled:"1"}]}).data("autocomplete") has no properties

In Opera 9:

message: Cannot convert undefined or null to Object

The code works only on Safari 3 and Chrome 1, when you test all the oldest browser in the jQuery compatibility list.