I have the below code which when text is entered in one box, the second box is automatically made inactive.
If the text in the active box is deleted(e.g. due to user entering incorrect data), the second text box does not automatically become active, it requires a page refresh to be made active again.

Is there a way to make the "made inactive" text box active when content of the "active" text bx is deleted?

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>

<body>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
<script type="text/javascript">
var first = document.getElementById("fname");
var last = document.getElementById("lname");
first.addEventListener("blur", function(){
  last.disabled = true;
});
last.addEventListener("blur", function(){
  first.disabled = true;
});
</script>
</body>
</html>
```