JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<div id="test">
    <dl>
        <dt>Anrede</dt>
        <dd>
            <select>
                <option>Herr</option>
                <option>Frau</option>
            </select>
        </dd>
        
        <dt>Nachname</dt>
        <dd><input id="lastname" type="textbox"/></dd>
        
        <dt>Vorname</dt>
        <dd><input id="firstname" type="textbox"/></dd>
    </dl>
<input id="btn_ok" type="button" value="OK"/>
</div>

CSS

dl {
    border: 3px double #ccc;
    padding: 0.5em;
  }
dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;
    color: green;
}
dt:after {
    content: ":";
}
dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
}
input[type=button] {
    width: 100px;
}

JavaScript

$(function(){
    
    var firstname = $('#firstname'),
        lastname = $('#lastname');
    
    $('#btn_ok').click(function() {
        
          
            
       var data = {
            json: $.toJSON({
               title: $('#test').find('select option:selected').val(),
               lastname: lastname.val(),
               name: firstname.val()
            }),
        }
            
        console.log(data);
        $.ajax({
            url: '/echo/json/',
            data: data,
            type:"POST",
            success: function(response) {
                console.log(response);
                alert(response.name);
                alert(response.lastname);
            }
        })        
    });        
});