Unsafe race condition

[purpleidea]

I think I must either be going insane, know nothing about javascript, or there's some sort of dangerous race in the library. Running this:

<form id="contact-form" class="post-new-comment" method="POST" action="https://formspree.io/purpleidea-com@shubin.ca">
	<input type="hidden" name="_next" value="{{ .Permalink }}" />
	<input type="hidden" name="_subject" value="Email from {{ .Site.BaseURL }}" />
	<input type="hidden" name="_format" value="plain" />
	<input type="hidden" name="_language" value="en" />
	<input type="text" name="_gotcha" style="display:none" />
	<h5><strong>Name&nbsp;</strong>(required)</h5>
	<input id="contact-name" type="text" style="width: 300px;" class="post-comment-field" placeholder="Your name">
	<h5><strong>Email&nbsp;</strong>(required)</h5>
	<input id="contact-email" type="email" style="width: 300px;" class="post-comment-field" placeholder="Your email address"><br />
	<h5><strong>Website&nbsp;</strong>(optional)</h5>
	<input id="contact-website" type="text" style="width: 300px;" class="post-comment-field" placeholder="Your website"><br />
	<h5><strong>Comments&nbsp;</strong>(required)</h5>
	<textarea id="contact-message" style="width: 450px; height: 200px;" class="post-comment-field" placeholder="Please enter your message here..." rows="10"></textarea><br />
	<input id="encrypted-contact-name" type="hidden" name="encrypted-name" value="en" />
	<input id="encrypted-contact-email" type="hidden" name="encrypted-email" value="en" />
	<input id="encrypted-contact-website" type="hidden" name="encrypted-website" value="en" />
	<input id="encrypted-contact-message" type="hidden" name="encrypted-message" value="en" />
	<input id="contact-button" type="button" class="post-comment-field btn btn-primary btn-xs" value="Send">
</form>

<!-- from: https://keybase.io/kbpgp_public/releases/kbpgp-2.0.8-signed-release.zip -->
<script src="/js/kbpgp/kbpgp-2.0.8-min.js"></script>
<!-- from: https://raw.githubusercontent.com/caolan/async/master/dist/async.min.js -->
<script src="/js/async.min.js"></script>
<script>

//console.log("hello...")

var pub_pgp_key = "XXX THE KEY..."; // use an actual key here

$('#contact-button').click(function() {
	kbpgp.KeyManager.import_from_armored_pgp(
		{
			armored: pub_pgp_key
		},
		function(err, user) {
			if (err) {
				console.log("could not load public key, message not sent");
				window.alert("could not load public key, message not sent");
				return
			}
			console.log("loaded public key!");
			process(user); // run all of the encryptions...
		}
	);
	return false; // cancel form submit
});

function process(user) {
	async.series(
		[
			function(done) {
				encrypt(done, user, '#contact-name', '#encrypted-contact-name')
			},
			function(done) {
				encrypt(done, user, '#contact-email', '#encrypted-contact-email')
			},
			function(done) {
				encrypt(done, user, '#contact-website', '#encrypted-contact-website')
			},
			function(done) {
				encrypt(done, user, '#contact-message', '#encrypted-contact-message')
			}
		],
		// the callback when every function above is done
		function(err, results) {
			// `results` contains a collection of what you've passed
			// to the `done` callbacks above
			if (err) {
				return // XXX
			}
			$('#contact-form').submit(); // submit it!
		}
	);
}

function encrypt(done, user, inputid, outputid) {
	var message = $(inputid).val();
	//console.log("message is: "+ message);

	var params = {
		msg: message,
		encrypt_for: user
	};

	// result comes in a callback
	kbpgp.box(params, function(err, result_string, result_buffer) {
		console.log("field is encrypting..."); // XXX
		console.log(err, result_string, result_buffer);
		$(outputid).val(result_string);
		done(err, inputid); // pass some value back
	});
}

</script>

Causes the same encrypted output to appear in all fields...
(Obviously add your own key...)

Any thoughts?