Sindbad~EG File Manager

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item p-1">
        <button type="button" class="nav-link active" value="1" aria-selected="true">Step 1</button>
    </li>
    
    <li class="nav-item p-1">
        <button type="button" class="nav-link nav_btn_gray" value="3" onclick="{% if data.cur_step >= 2 %}jump_step(3){% endif %}">Step 2</button>
    </li>
    <li class="nav-item p-1">
        <button type="button" class="nav-link nav_btn_gray" value="4" onclick="{% if data.cur_step >= 3 %}jump_step(4){% endif %}">Step 3</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-lg-6 col-md-6 col-sm-12 form-group">
                    <label class="font-weight-bold">Proposer Membership Number:</label><br>
                    <span>{{user_info.membership_no or "Non-member"}}</span>
                    <input type="hidden" name="member_id" id="member_id" value="{{user_info.membership_no}}" />
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                    <label class="font-weight-bold">Proposer Name:</label><br />
                    <span>{{user_info.full_name or ''}}</span>
                    <input type="hidden" name="name" id="name" value="{{user_info.full_name}}" />
                </div>
            </div>
              <div class="row mt-2">
                
                <div class="col  form-group">
                    <div class="row">
                        <div class="col py-2">
                            <div><label class="font-weight-bold">Type of Symposium <span class="text-danger">*</span></label></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div>
                                <select class="form-control categories" id="presenting_type" name="presenting_type">
                                    <option value="" id="select">--Select--</option>
                                    {% if type_of_symposium %} {% for item in type_of_symposium %} {% if data.presentation_type_id == item.presentation_type_id %}
                                    <option value="{{item.presentation_type_id}}" selected> {{item.type or ''}} </option>
                                    {% else %}
                                    <option value="{{item.presentation_type_id}}"> {{item.type or ''}} </option>
                                    {% endif %} {% endfor %} {% endif %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           
          <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                    <label  class="font-weight-bold">Title of the Symposium (not exceeding 200 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>
           <!--  <div class="row my-2">
                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                    <label>Section:<span class="text-danger">*</span></label>
                    <select class="form-control categories" id="category" name="category">
                        <option value="" id="select">--Select--</option>
                        {% if categories %} {% for item in categories %}
                        <option value="{{item.category_id}}"> {{item.display_name}} </option>
                        {% if data.category_id == item.category_id : %}
                        <option value="{{item.category_id}}" selected> {{item.display_name}} </option>
                        {% endif %} {% endfor %} {% endif %}
                    </select>
                </div>
            </div> -->
           <!--  <div class="row">
                {% if duration.setting_value == '75' %}
                <div class="col">
                    <label>Level of Course:*</label>
                    <select class="form-control" name="level" id="level">
                        <option value="">--Select--</option>
                        <option value="Basic" {% if data.level == 'Basic' %} selected="selected" {% endif %}>Basic</option>
                        <option value="Intermediate" {% if data.level == 'Intermediate' %} selected="selected" {% endif %}>Intermediate</option>
                        <option value="Advance" {% if data.level == 'Advance' %} selected="selected" {% endif %}>Advance</option>
                    </select>
                </div>
                {% endif %}
                <div class="col">
                    <input type="hidden" name="duration" id="duration" value="{{ duration.setting_value or '' }}" />
                    <label>Duration of Course:</label><br />
                    <span>{{duration.setting_value or ''}} minutes</span>
                </div>
            </div>
 -->            <div class="row">
                <div class="col float-right py-2">
                    <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(1,1)" />
                </div>
            </div>
            <input type="hidden" name="user_id" id="user_id" value="{{user_id}}" />
            <input type="hidden" name="abs_id" id="abs_id" value="{{abs_id}}" />
            <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
        </form>
    </div>
</div>
{% block script %}
<script type="text/javascript">
    $(document).ready(function () {
         var $title = $("#title");
        var $chars = $("#chars");
          var textMax = 200;
         var chars_text = $("#chars_text")
          
           chars_text.html(" characters remaining");
            $chars.css("color","red");
            $chars.html(textMax);
         $title.on("keyup", countChar);
         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);
                }
            }
    });
    </script>
{% endblock %}