Problems rendering drupal 7 user registration form with ajax in BootStrap 3 Modal

Question

I have a subtheme based on bootstrap 3 and am trying to load user registration form(user_register_form) on front--page.tpl.php, I am adding #ajax to the submit button using form_alter

     $form["actions"]["submit"] = array(
        '#type' => 'submit',
        '#ajax' => array(
            'wrapper' => "user-register-form", "effect" => "fade",
            'effect' => 'fade',
            'callback' => 'my_form_submit_handler',
            'method' => 'replace',
        ),
        '#value' => t("Sign-up"),
        '#id' => 'user_register_form'
    );

I am rendering the form in two places on the same page (a) in a div which is a regular div and (b) in a bootstrap modal div as mentioned here http://getbootstrap.com/javascript/#modals

     <?php
            if (user_is_anonymous()) {
                $form = drupal_get_form('user_register_form');
                 print drupal_render($form);
            }
     ?> 

in case (a) the ajaxified form works very well, however in case (b) the form is no longer ajaxified , the submit button does not have the "ajax-processed" class attached.

I intend to open all my application forms using bootstrap modal and ajax however i am not able to do this as of now. I want to know the right way to load any ajax form in bootstrap modal dialog I know this is a fairly common problem with modal dialogs and drupal forms, but i am yet to understand what the reason behind this behaviour, any help or direction will be highly appreciated.

There is one more similar question that is unanswered here Drupal load form with ajax callback in Bootstrap modal

Answer 1

By rendering the user registration form twice, duplicate form id's were being created. After recreating the second form with a different ID, things are good.