JSFiddle - React, Tailwind, and code Playground

by johannesMt

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
  <form action="/" id="signup-form" method="post" enctype="multipart/form-data">
      <div class="sign-up-form-entry-half">
         <label class="input-label">First Name</label>
          <input type="text" name="first_name" class="sign-up-input sign-up-input-half" placeholder="First Name">
      </div>
       <div class="sign-up-form-entry-half">
           <label class="input-label">Last Name</label>
           <input type="text" name="last_name" class="sign-up-input sign-up-input-half" placeholder="Last Name">
       </div>

       <div class="sign-up-form-middle">
          <div class="sign-up-form-entry">
             <label class="input-label">Phone Number</label>
             <input type="tel" name="phone" class="sign-up-input" placeholder="Example: 990001">
         </div>

        <input type="submit" value="Sign Up"  class="sign-up-submit">
      </div>
  </form>

CSS

.input-label{
  display: block;
}
.sign-up-form-entry, .sign-up-form-entry-half {
    margin: 10px 0;
}

JavaScript

$('#signup-form').find('input[name="phone"]').on('keyup', function(e) {
            // prevent from typing letters
            $(this).val($(this).val().replace(/[^\d.+]/g, ''));

            var textVal = $(this).val();
            console.log('entered value : ', textVal);
            // check if + character occurs
            if(textVal === '+'){
              console.log('position : ', textVal.indexOf('+'));
              // remove + from occurring twice
              // check if + character is not the first
              if(textVal.indexOf('+') > 0){
                 var newValRem = textVal.replace(/\+/, '');
                 console.log('removed plus version : ', '+' + newValRem);
                 $(this).val(newValRem);
              }
              
            }

    });