I have 2 Mailchimp forms on one page, for different lists. The Mailchimp javascript only works for one of them. Is there a way to remedy this?

This is how the forms are placed:

<div class="container">
<div class="row ">
    <div class="col-lg">
        <div id="mc_embed_signup">
        <form>
        </form>
        </div>
        <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    </div>

    <div class="col-lg">
        <div id="mc_embed_signup">
        <form>
        </form>
        </div>
        <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    </div>
</div>

The javascript is supposed to prevent another mailchimp page opening, but rather to have the signup take place on the page where the form is embedded. It only works for the first form, but not the second.

I am assuming that this is because both forms have the same ID, but I don't know if I can change the IDs. The javascript linked is not formatted at all and I can't read it.

I tried putting the second form into an iframe, and that works, but the formatting is awful. Even if I remove the border and scrollbar, the form is the wrong size and doesn't fit into the page design.

Is there a way to solve this elegantly?