JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
OTHER FORM
<form id="cp-otherform" action="/cypo/index.php" method="POST" stylke="display:none;" >
    <input type="hidden" name="Login" value="Login">
    <input type="hidden" name="pp" value="0" />
    <input type="text"  id="cp-loginname" name = "loginname" placeholder = "Login ID" class="loginforminput cp-width-50" autofocus >
     <input type="password" id="cp-password"  name = "password"  placeholder = "password" class="loginforminput cp-width-50">
</form>

FORM DIALOG
<form id="cp-loginform" action="/cypo/index.php" method="POST" >
    <input type="hidden" name="Login" value="Login">
    <input type="hidden" name="pp" value="0" />
    <input type="text"  id="cp-loginname" name = "loginname" placeholder = "Login ID" class="loginforminput cp-width-50" autofocus >
    <input type="password" id="cp-password"  name = "password"  placeholder = "password" class="loginforminput cp-width-50">
    <input type="submit" id="cp-submit"  name = "submit" onclick="" >
</form>

JavaScript

$("#cp-submit").on("click", function(e){
e.preventDefault();
    var loginval = $("#cp-loginname").val(); 
    var passwordval = $("#cp-password").val(); 
    console.log(loginval.concat(" ",passwordval));//RETURN VALUES OF OTHER FORM
    
    var loginval = $("#cp-loginform #cp-loginname").val(); 
    var passwordval = $("#cp-loginform #cp-password").val(); 
    console.log(loginval.concat(" ",passwordval));//RETURN VALUES OF FORM DIALOG
       
});