Focus not moving to every form control when tab key is pressed-CodePudding

I have a form where I need to allow users to click delete and add using keyboard. The genral rule is that users use tab key to shift focus from one control to other.

When tab is pressed for the form the active control will move only to textboxes and not to add and delete corner buttons.

I am using bootstrap 5.2

<!doctype html>
<html lang="en">



<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/somethinggoodone/cdn/AniketPradhan_bootstrap.css">



<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>



<body>



<div >
<span >