You got downvoted because the question is a bit unclear, but hopefully this is something close to what you are after. Your code is a mix of jQuery and plain JS, but you did tag your question with jQuery, so this is a jQuery solution.
The tricky part is finding the focussed input. It's tricky because as soon as you click your TOP div, the input that was previously focussed is suddenly not focussed! At the time of the click, focus is already gone.
So the answer is to track which input is focussed; every time an input becomes focussed, save which one it was in a variable:
let focussed;
$('input').on('focus', function() {
focussed = $(this).attr('id');
});
Now even after focus has switched away, we still know which one it was.
The rest is relatively simple:
If the focussed element is (was) P99, set focus to P1;
Otherwise, find the first empty input, and set focus there. Note this is slightly different to what you specified. You said if the focus is P1 when TOP is clicked, focus should shift to the first empty input. In this code, clicking TOP with focus at any input, except P99, will shift focus to the first empty input. I did this because if you only shift focus when at P1, what do you do when focus is in P2 - P98? My guess is you want the same behaviour for those cases.
Here's a working snippet. Some notes:
I've only included inputs 1-30 and 99, enough for the page to scroll;
I moved the inline onclick() to a separate event handler, as that is considered better practice and separates your HTML from your JS, see eg jQuery.click() vs onClick ;
I am not sure what the if ($('#P1').is(":visible")) { test is for, your text does not mention anything about input visibility. I am assuming this was an experiement/attempt and isn't relevant;
I am assuming the 64 in your code is just an intermediate experiement/attempt, as your text and HTML specify there should be 99 inputs;
$(document).ready(function() {
let focussed,
$inputs = $('input'),
$back2Top = $('#back2Top'),
$p1 = $('#P1');
// The function to set focus
function togglePX() {
// First check if we are at P99
if (focussed == 'P99') {
$p1.focus();
// We're done
return;
}
// For focus at any other input, let's find first blank input.
// Iterate over all inputs, trimming whitespace to find the
// empty ones, then take the first and focus it.
$inputs.filter(function (index, element) {
return $.trim($(element).val()) === '';
}).first().focus();
}
// Handle clicks on TOP
$back2Top.on('click', function() {
togglePX();
});
// Every time an input is focussed, store which one it was
$inputs.on('focus', function() {
focussed = $(this).attr('id');
// console.log('Input #' + focussed + ' is focussed')
});
});
#back2Top {
display: table;
z-index: 999;
cursor: pointer;
position: fixed;
background-color: transparent;
text-align: center;
text-decoration: none;
right:20px;
bottom:20px;
}
input {
padding: 6px;
margin: 4px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="back2Top">TOP</div>
<input id="P1">
<input id="P2">
<input id="P3">
<input id="P4">
<input id="P5">
<input id="P6">
<input id="P7">
<input id="P8">
<input id="P9">
<input id="P10">
<input id="P11">
<input id="P12">
<input id="P13">
<input id="P14">
<input id="P15">
<input id="P16">
<input id="P17">
<input id="P18">
<input id="P19">
<input id="P20">
<input id="P21">
<input id="P22">
<input id="P23">
<input id="P24">
<input id="P25">
<input id="P26">
<input id="P27">
<input id="P28">
<input id="P29">
<input id="P30">
....
<input id="P99">
