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 active" value="1" aria-selected="true">Step 1</button>
    </li>
    <li class="nav-item p-2">
        <button type="button" class="nav-link nav_btn_gray" value="2" onclick="{% if data.cur_step >= 1 %}jump_step(2){% endif %}">Step 2</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active p-2 rounded" role="tabpanel">
        <form method="POST" action="{{url_for('main.Step1post',abs_id=abs_id,abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s1">
            <div class="row">
                <div class="col form-group">
                    <div>
                        <label >Chief / Presenting Author Membership Number</label> <br />
                        {{user_info.membership_no or 'Non Member'}}<input type="hidden" name="member_id" id="member_id" value="{{ member_id or '' }}" />
                    </div>
                </div>
                <div class="col form-group">
                    <div>
                        <label >Chief / Presenting Author Name</label>
                        <br />
                        {{user_info.full_name or ''}}<input type="hidden" name="name" id="name" value="{{ name or ''}}" />
                    </div>
                </div>
            </div>
            <div class="row ">
                <div class="col">
                    <label>Title of Innovation Odyssey </label><span class="text-danger">*</span> (not exceeding 100 characters)
                    <span id="chars" style="color: red;"></span><span id="chars_text" style="color: blue;"></span>
                    <textarea name="title" id="title" class="form-control" placeholder="Title of Innovation Odyssey" value="">{{data.title or ''}}</textarea>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col form-group">
                    <label>Synopsis </label><span class="text-danger">*</span> (not exceeding 100 words)<span id="chars1" class="text-danger ml-1"></span><span id="chars1_text" style="color: blue;"></span>
                     
                    <textarea name="synopsis" id="synopsis" class="form-control" cols="50" rows="5" required placeholder="Synopsis" value="">{{data.synopsis or ''}}</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col float-right form-group">
                    <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(1,1)" />
                </div>
            </div>
            <div id="step2"></div>
            <!-- <input type="hidden" name="user_id" id="user_id" value="{{user_id}}" /> -->
            <input type="hidden" name="abs_id" id="abs_id" value="{{Cryptography.decrypt(abs_id)}}" />
            <input type="hidden" name="abs_type" id="abs_type" value="{{abs_type}}" />
            <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
            <input type="hidden" name="step" id="step" value="1" />
            <input type="hidden" name="step" id="is_next" value="1" />
        </form>
    </div>
</div>
{% block script %}
<script type="text/javascript">
        var $title = $("#title");
        var $synopsis = $("#synopsis");
        var $chars = $("#chars");
        var $chars1 = $("#chars1");
        var x100 = 100;
        var x1000 = 1000;
        

        var chars_text  = $("#chars_text")
        var chars1_text = $("#chars1_text")
        chars_text.html(" characters remaining");
        $chars.css("color","red");
        $chars.html(x100);
        $chars1.css("color","red");
        $chars1.html(x100);
        chars1_text.html(" words remaining");
        
        $title.on("keyup", countChar);
        $synopsis.on("keyup", countChar5);
        
        function countChar() {
            var textLength = $title.val().length;
            var textRemaining = x100 - textLength;
            if (textRemaining < 0) {
                $chars.attr("class", "text-danger ml-2");
                var textRemaining1 = textRemaining;
                $chars.html(textRemaining1);
                chars_text.html(" characters exceeded");
                // $chars.html(textRemaining1 + " characters exceeded");
            } else {
                $chars.attr("class", "text-danger ml-2");
                chars_text.html(" characters remaining");
                $chars.html(textRemaining);
            }
        }
        function countChar5() {
            var textLength = $synopsis.val().split(/[\s\.\?]+/).length;
            var textRemaining = x100 - textLength;
            if (textRemaining < 0) {
                $chars1.attr("class", "text-danger ml-2");
                var textRemaining1 = textRemaining;
                $chars1.html(textRemaining);
                chars1_text.html(" words exceeded");
                // $chars1.html(textRemaining + " words exceeded");
            } else {
                $chars1.attr("class", "text-danger ml-2");
                chars1_text.html(" words remaining");
                $chars1.html(textRemaining);
            }
        }
       
</script>
{% endblock %}