Javascript/jQuery go to next input/select change select value

Question

I write this script to simulate tab key. I mix 2 different examples from here and work fine only for inputs.

My script is

$("#home").on('keydown', function(event) {
    if(event.ctrlKey && ( event.which === 39 ) ) {
    var target = document.activeElement;
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
                break;
            if (next.tagName.toLowerCase() == "input" || next.tagName.toLowerCase() == "select") {
                next.focus();
                break;
            }
        }
    }
});

I have two problems. Firstly with select input

<select id="position" class="toNextWithSimulateTab" name="position" form="athlets_data" style="width:175px">
     <option name="1">1</option>
     <option name="2">2</option>
     <option name="3">3</option>
     <option name="4">4</option>
</select>

when select input is focus and i press ctr and right arrow (as defined by script to go to next input) change the value to the next and then focus the next input. i want to select an option and then with ctrl and right arrow to go to next input.

The second problem:

I have split my form with two divs right column and left column so when I click on a left's div input and use my script (ctrl and right arrow) to tab inputs, when go to last input can't move to the first input at the right div.

is there any idea?

Thanks in advance

<div id="home" class="tab-pane fade in active row" style="padding-left: 20px;">
    <h3 style="color:#06F">Στοιχεία ασθενή</h3>
    <br>
    <form action="add_new_patient_card.php" id="patient_data" class="redirected_form" method="post">
    <div id="patient_data_left_column" class="col-md-5">
        <a>Lastname: </a>
        <input id="lastname" type="text" class="toNextWithSimulateTab" name="lastname" value="">
        <br>
        <br>
        <a>Firstname: </a>
        <input id="firstname" type="text" class="toNextWithSimulateTab" name="firstname" value="">
        <br>
        <br>
        <a>Fathers name: </a>
        <input id="fathersname" type="text" class="toNextWithSimulateTab" name="fathersname"  />
        <br>
        <br>
        <a>Position: </a>
        <select id="position" class="toNextWithSimulateTab" name="position" form="athlets_data" style="width:175px">
            <option name="1">1</option>
            <option name="2">2</option>
            <option name="3">3</option>
            <option name="4">4</option>
</select>
        <br>
        <br>
        <a>AMA: </a>
        <input id="ama"  type="text" class="toNextWithSimulateTab" name="ama"  />
        <br>
        <br>
        <a>Birthday: </a>
        <input id="bday" type="date" class="toNextWithSimulateTab" name="bday" style="width:175px"  />
        <br>
        <br>
        <a>Sex: </a>
        <select id="sex" class="toNextWithSimulateTab" name="sex" form="patient_data" style="width:175px">
            <option name="male">male</option>
            <option name="female">female</option>
        </select>
        <br>
        <br>
    </div>

    <div id="patient_data_right_column" class="col-sm-5">
        <a>Phone: </a>
        <input id="phone" type="text" class="toNextWithSimulateTab" name="phone" value="">
        <br>
        <br>
        <a>Mobile: </a>
        <input id="mobile" type="text" class="toNextWithSimulateTab" name="mobile" value="">
        <br>
        <br>
        <a>Fax: </a>
        <input id="fax" type="text" class="toNextWithSimulateTab" name="fax" value="">
        <br>
        <br>
        <a>Email: </a>
        <input id="email" type="text" class="toNextWithSimulateTab" name="email" value="">
        <br>
        <br>
        <a>Address: </a>
        <input id="address" type="text" class="toNextWithSimulateTab" name="address" value="">
        <br>
        <br>
        <a>City: </a>
        <input id="city" type="text" class="toNextWithSimulateTab" name="city" value="">
        <br>
        <br>
        <a>Country: </a>
        <input id="country" type="text" class="toNextWithSimulateTab" name="country" value="">
    </div>
</form>
  </div>

Answer 1

OUFF that was so hard but i did it hihihi here is a Demo

$(".toNextWithSimulateTab").keydown(function(event)
{
    if( event.ctrlKey && ( event.which === 39 ) ) 
    {
        event.preventDefault();
        $(this).next(".toNextWithSimulateTab").focus();
        if($(this).is(":last-child") && $(this).parent().attr("id") == "patient_data_left_column")
        {
            $(this).parent().next().find(".toNextWithSimulateTab:first-child").focus();
        }
    }
});