Untitled

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            const getVal = () => {
                return Number($(".form-control").val());
            }

            $(".btn").click(() => {
                createButtons(getVal());
            })

            const createButtons = (n) => {
                $("inner").empty();
                for (let i = 0;i < n;i++) {
                    $(".inner").append(`<button href="#button${i}" id="button${i}">Open section ${i}</button>`);
                    $(document).on('click', `#button${i}`, () => {
                        showSection(i);
                    });
                };
                showSection(0);
            };

            const showSection = (index) => {
                $("#sectionContainer").empty().append(`<p id="sectionInner">This is section number ${index}</p>`);
                const genRandom = () => { return Math.floor(Math.random() * 255) + 0 };
                $("#sectionInner").css('background-color', `rgba(${genRandom()},${genRandom()},${genRandom()})`);
            }
        })
    </script>
</head>

<body>
    <div class="container">
        <div class="row">
            <input type="text" class="form-control">
            <input type="submit" class="btn btn-default">
        </div>
        <!-- <div class="row">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#myid1" data-toggle="tab" aria-expanded="true">1</a></li>
                <li class=""><a href="#myid1" data-toggle="tab" aria-expanded="false">2</a></li>
                <li class=""><a href="#myid1" data-toggle="tab" aria-expanded="false">3</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="myid1">
                    <p>1 текст текст</p>
                </div>
                <div class="tab-pane fade" id="myid2">
                    <p>2 текст текст текст текст </p>
                </div>
                <div class="tab-pane fade" id="myid3">
                    <p>3 текст текст текст текст текст текст текст текст</p>
                </div>
            </div>
        </div> -->
        <div class="inner"></div>
        <div id="sectionContainer"></div>
    </div>

</body>

</html>