javascript obtenir toutes les entrées à l'intérieur de la div comme select et textarea

J'ai été à essayer de comprendre comment obtenir tous les éléments à l'intérieur d'un div comme select et textarea et de les transmettre à l'éditeur, jusqu'à présent j'ai compris avec entrée, mais je suis juste coincé avec le reste.

Voici le code jusqu'à présent

function InsertShortcode(elem) {
        var shortcodeName = elem.parentElement.id;
        var inputs = document.getElementById(shortcodeName).getElementsByTagName('input'), i=0, e;
        var inputs_val = '[' + shortcodeName;
        while(e=inputs[i++]){
            if(e.id){
                inputs_val += ' ' + e.id + '="' + e.value + '"';
            }
        }
        inputs_val += ']';

        window.send_to_editor(inputs_val);
    }

Par ce que je suis en mesure de récupérer toutes les entrées à l'intérieur d'une div lorsque le bouton soumettre est encore, mais je ne suis pas sûr de la façon de saisir textarea ou sélectionner les entrées.

Le problème c'est que je dois le rendre dynamique. Je vais avoir beaucoup de "shortcodes" et chacun sera dans son propre div où le bouton est. Mais chacun aura ses propres intrants dont je ne contrôle pas, donc j'ai besoin de les attraper tous et envoyer les valeurs de l'éditeur. Voici l'exemple de code.

    <div class="output-shortcodes">
        <?php foreach( $theme_shortcodes as $key => $name ) { ?>
            <div id="<?php echo $key ?>">
                <p>
                    <h2><?php echo $name ?></h2>
                </p>
                <?php $form = $key . '_form';
                    if(function_exists($form)) {
                        $form(); //this is where the input fields are dynamically created on each shortcode.
                    }
                ?>
                <button class="button-primary" onclick="InsertShortcode(this)">Insert shortcode</button>
            </div>
        <?php } ?>
    </div>