SadTask

<!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 () {
            $(".btn").click(e => {
                let value = $(".form-control").val();

                $(".nav-tabs").append('<li class="active"><a href=#myid1">1</a>');
                $("#myTabContent").append(`<div class="tab-pane fade active in" id="myid1"><p>Text 1</p>`);
                for (let index = 1;index < value;index++) {
                    $(".nav-tabs").append(`<li class=""><a href="#myid1" data-toggle="tab">${index + 1}</a>`);
                    $("#myTabContent").append(`<div class="tab-pane fade" id=myid${index + 1}><p>Text ${index + 1}</p>`);
                }

                let getParent = document.querySelectorAll("ul")[0];
                let li = document.querySelectorAll("li");
                getParent.addEventListener("click", e => {
                    li.forEach(item => {
                        if (item.getAttribute('id') === e.target.getAttribute('id')) {
                            item.classList.add('active');
                        }
                        else {
                            item.classList.remove('active');
                        }
                    })
                })
            })
        })
    </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>

</body>

</html>