<div class="container wordleSolver-container">
    <div class="row">
        <div class="col-md-10 mx-auto ws">
            <div style="font-size: 15px;" class="alert errMessage" role="alert"></div>
            <form name="verify" class="forms_data">
                <div class="form-group">

                    <label for="greenLetters" class="my-1 p-0 wordleSolver-label">Enter green letters at correct
                        position</label>
                    <div class="col-md-6 p-0">
                        <div class="d-flex">
                            <input data-id="0" type="text" autocomplete="off" tabIndex="0"
                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
                                id="greenLetters">
                            <input data-id="1" type="text" autocomplete="off" tabIndex="1"
                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
                                id="greenLetters">
                            <input data-id="2" type="text" autocomplete="off" tabIndex="2"
                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
                                id="greenLetters">
                            <input data-id="3" type="text" autocomplete="off" tabIndex="3"
                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
                                id="greenLetters">
                            <input data-id="4" type="text" autocomplete="off" tabIndex="4"
                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
                                id="greenLetters">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="yellowLetters" class="my-1 p-0 wordleSolver-label">Enter letters in yellow below</label>
                    <div class="col-md-6 p-0">
                        <div class="d-flex">
                            <input type="text" autocomplete="off" tabIndex="1"
                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
                                id="yellowLetters" tabIndex="5">
                            <input type="text" autocomplete="off"
                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
                                id="yellowLetters" tabIndex="6">
                            <input type="text" autocomplete="off"
                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
                                id="yellowLetters" tabIndex="7">
                            <input type="text" autocomplete="off"
                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
                                id="yellowLetters" tabIndex="8">
                            <input type="text" autocomplete="off"
                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
                                id="yellowLetters" tabIndex="9">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="greyLetters" class="my-1 p-0 wordleSolver-label">Enter letters in grey below</label>
                    <div class="col-md-6 p-0 wrapper">
                        <div class="d-flex">
                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                id="greyLetters" value="" autocomplete="off" tabIndex="10">
                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                id="greyLetters" value="" autocomplete="off" tabIndex="11">
                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                id="greyLetters" value="" autocomplete="off" tabIndex="12">
                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                id="greyLetters" value="" autocomplete="off" tabIndex="13">
                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                id="greyLetters" value="" autocomplete="off" tabIndex="14">
                        </div>
                        <div class="d-flex mt-2">
                            <input type="text" autocomplete="off" tabIndex="15"
                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                            <input type="text" autocomplete="off" tabIndex="16"
                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                            <input type="text" autocomplete="off" tabIndex="17"
                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                            <input type="text" autocomplete="off" tabIndex="18"
                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                            <input type="text" autocomplete="off" tabIndex="19"
                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                        </div>
                    </div>


                </div>
                <button type="button" data-toggle="tooltip" data-placement="top" title="Add more greyletters fields"
                    id="addMore"><i class="bi bi-plus"></i>
                </button>
                <div class="form-group text-right">
                    <div class="col-md-4 p-0" style="margin: 0 0 0 auto;">
                        <button type="submit" id="wordlesolver_submit" class="btn wordlesolver-btn mt-3">Update</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-10 mx-auto p-0 mt-3">
            <div id="wordleWordCount"></div>
            <div id="wordleSolverData"></div>
            <div class="alert" role="alert" id="wordleSolvererrorMsg" style="font-size: 15px; padding:15px"></div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    $(document).on('keypress', 'input', function (e) {
        if (e.which === 32) {
            e.preventDefault();
            var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');

            if (!$next.length) {
                $next = $('[tabIndex=1]');
            }
            $next.focus().click();
        }
    });
</script>