You can only have one id
per element see this answer for more details so you have to remove the previous id but that's weird.
All this considered, here is how you could achieve this but I don't imagine that this is actually what you want
$("#listitem1").removeAttr("id").attr("id", "newID")
In the above code I'm chaining the methods by first selecting #listitem1
then removing it's id attribute and finally applying a new id.
Also in your example var i = $("middle_item").attr("id");
returns undefined because the id never applied but if you did you made two errors: first you wrote $("middle_item")
when it should have been $("#middle_item")
and second because you didn't first remove the previous id
.
jQuery Docs
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.