JSFiddle - React, Tailwind, and code Playground

by Lindow

HTML

<form>

    <label class="tp_box_1">
        <input type="radio" name="selected_layout" class="selected_layout" value="layout_1">
        <div class="box_1">
            <h3>box_one</h3>
            <p>1</p>
        </div>
    </label>
    
    <br><hr><br>
    
    <label class="tp_box_2">
        <input type="radio" name="selected_layout" class="selected_layout" value="layout_2">
        <div class="box_2">
            <h3>box_two</h3>
            <p>2</p>
        </div>
    </label>

    <textarea id="mytextarea"></textarea>
    <input id="submit_form" type="button" value="Send">
</form>

CSS

label {
    width:auto;
    display:block;
    width:100%;
    background:#eaeaea;
    padding:20px;
}

#submit_form {
    padding:10px 20px;
    margin-top:10px;
    background:#4dad9c;
    border-radius:4px;
    color:white;
    border:0px solid #fafafa;
}

JavaScript

$('input[type="radio"][name="selected_layout"]').change(function() {
     if(this.checked) {

         var selected_layout = $(this).find('.selected_layout');

         var someVariable = selected_layout.html(); // getting undefined
         
         $('#mytextarea').val(someVariable);
     }
 });