Sindbad~EG File Manager

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item p-2">
        <button type="button" class="nav-link nav_btn_gray" value="1" onclick="jump_step(1)" aria-selected="true">Step 1</button>
    </li>
    <li class="nav-item p-2">
        <button type="button" class="nav-link active" value="2">Step 2</button>
    </li>
    <li class="nav-item p-2">
        <button type="button" class="nav-link nav_btn_gray" value="3" onclick="{% if data.cur_step >= 2 %}jump_step(3){% endif %}">Step 3</button>
    </li>
    <li class="nav-item p-2">
        <button type="button" class="nav-link nav_btn_gray" value="4" onclick="{% if data.cur_step >= 3 %}jump_step(4){% endif %}">Step 4</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active p-2 rounded" role="tabpanel">
        <form action="{{url_for('main.StepPost_2',abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s2" method="POST">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <label class="mt-2">Title of the Course (not exceeding 100 characters)<span class="text-danger">*</span></label>
                    <span id="chars" style="color: red;"></span><span id="chars_text" style="color: blue;"></span>
                    <textarea name="title" id="title" class="form-control" placeholder="Enter the title" value="">{{data.title or ''}}</textarea>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <label>Synopsis (not exceeding 1000 characters)<span class="text-danger">*</span></label>
                     <span id="chars1" style="color: red;"></span><span id="chars1_text" style="color: blue;"></span>
                    
                    <textarea name="Synopsis" id="Synopsis" class="form-control" cols="50" rows="5" placeholder="Enter Synopsis" value="">{{data.synopsis or ''}}</textarea>
                </div>
            </div>
            <br />

            <div class="row py-2">
                <div class="col">
                    <input type="button" name="Previous" id="Previous" class="btn btn-primary" value="Previous" onclick="move(2,0)" />
                </div>
                <div class="col">
                    <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(2,1)" />
                </div>
            </div>

            <input type="hidden" name="user_id" id="user_id" value="{{user_id}}" />
            <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
            <input type="hidden" name="abs_id" id="abs_id" value="{{data.abs_id}}" />
            <input type="hidden" name="step" id="step" value="2" />
            <input type="hidden" name="is_next" id="is_next" value="1" />
        </form>
    </div>
</div>
    {% block script %}
    <script type="text/javascript">
        $(document).ready(function () {
            var $title = $("#title");
            var $Synopsis = $("#Synopsis");
            var $resume = $("#resume");
            var $chars = $("#chars");
            var $chars1 = $("#chars1");
            var $chars2 = $("#chars2");
            var textMax = 100;
            var synopismax = 1000;
            var resumemax = 600;
            var chars_text = $("#chars_text")
            var chars1_text = $("#chars1_text")
            chars_text.html(" characters remaining");
            $chars.css("color","red");
            $chars.html(textMax);
            $chars1.css("color","red");
            $chars1.html(synopismax);
            chars1_text.html(" characters remaining");
            $chars2.html(resumemax + " characters remaining");
            $title.on("keyup", countChar);
            $Synopsis.on("keyup", countChar1);
            $resume.on("keyup", countChar2);
            function countChar() {
                var textLength = $title.val().length;
                var textRemaining = textMax - textLength;
                if (textRemaining < 0) {
                    $chars.css("color", "red");
                    var textRemaining1 = textRemaining;
                    $chars.html(textRemaining1);
                    chars_text.html(" characters exceeded");
                } else {
                    $chars.css("color", "red");
                    chars_text.html(" characters remaining");
                    $chars.html(textRemaining);
                }
            }
            function countChar1() {
                var textLength = $Synopsis.val().length;
                var textRemaining = synopismax - textLength;
                if (textRemaining < 0) {
                    $chars1.css("color", "red");
                    var textRemaining1 = textRemaining;
                    $chars1.html(textRemaining);
                    chars1_text.html(" characters exceeded");
                } else {
                    $chars1.css("color", "red");
                    chars1_text.html(" characters remaining");
                    $chars1.html(textRemaining);
                }
            }
            function countChar2() {
                var textLength = $resume.val().length;
                var textRemaining = resumemax - textLength;
                if (textRemaining < 0) {
                    $chars2.css("color", "red");
                    var textRemaining1 = -textRemaining;
                    $chars2.html(textRemaining + " characters exceeded");
                } else {
                    $chars2.css("color", "blue");
                    $chars2.html(textRemaining + " characters remaining");
                }
            }
        });
    </script>
    {% endblock %}