Place a button after an input and show it's password in plain text

[seularts]

I have managed to achieve this action through this:

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-group">
                    <input type="password" id="pass-on" title="<?php echo $user->valid_password_error; ?>" class="form-control" name="txt_upass" placeholder="Enter Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
                    <label>Password</label>
                    <div class="input-group-append">
                        <span class="password-button password-button-main" data-id="pass-on"><i class="fas fa-eye-slash"></i></span>
                    </div>
                </div>
                <div class="form-group progress jquery-result-1" style="height: 10px;">

                    <div class="form-group input-group">
                        <input type="password" id="pass-verify-on" title="<?php echo $user->valid_password_error; ?>" class="form-control" name="txt_upass_ok" placeholder="Retype Password" autocomplete="off" value="" oninvalid="setCustomValidity('<?php echo $user->password_error; ?>')" oninput="setCustomValidity('')" required />
                        <label>Retype Password</label>
                        <div class="input-group-append">
                            <span class="password-button password-button-verify" data-id="pass-verify-on"><i class="fas fa-eye-slash"></i></span>
                        </div>
                    </div>

                    <script>
                        function togglePasswordVisibility($pw, on, id) {
        $pw.attr('type', on ? 'password' : 'text');
        $('[data-id=' + id + '] > i').toggleClass('fa-eye-slash fa-eye');
    }

    // $("#pass-on").after('<div class="input-group-append"><span class="password-button password-button-main"><i class="fas fa-eye-slash"></i></span></div>');

    $('[data-id]').on('click', function() {
        var id = $(this).data('id'),
            $pw = $('#' + id);

        togglePasswordVisibility($pw, false, id);

        setTimeout(function() {
            togglePasswordVisibility($pw, true, id);
        }, 800);
    });
    </script>

But I would like to place the password button from within the function using the commented line with the after callback and making it apply the same effect. Right now the button correlates with the input through the association of data-id and id. If I would to place it inside the function I would have to get rid of the data-id and still make it act individually on each input, I just can't figure how. Thank you for your time.