JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full mb-10 relative">
            <i class="fas fa-unlock w-1/12"></i>
            <input class="transparence-input w-3/4 radius p-1 px-10 relative" type="password" name="password" value="" placeholder="Password" data-parsley-required="true" data-parsley-trigger="focus keyup" data-parsley-required-message="Campo obbligatorio">
            <div class="error-field-icon flex hidden">
              <i class="fas fa-exclamation-circle text-red-800"></i>
              <p class="div-error px-1 absolute text-white lg:text-sm radius h-auto hidden"></p>
            </div>
          </div>

JavaScript

$('div').on('click', '.fa-exclamation-circle', function(){
alert();
  var target = $(this).parent().find('p');
  target.toggleClass("hidden");
})