JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Form elemanlarının HTML kodları -->
<div>
    <p>Ad Soyad: <input type="text" id="nameInput" class="listenChange" /></p>
    <p>Telefon: <input type="text" id="phoneInput" class="listenChange" /></p>
    <p>Email: <input type="text" id="emailInput" class="listenChange" /></p>
    <p>Adres: <input type="text" id="addressInput" class="listenChange" /></p>
</div>

<!-- Kişi kartının html kodu -->
<div class="card">
    <h1 id="name">Serdar Kuzucu</h1>
    <h2 id="phone">05547865930</h2>
    <h3 id="email">[email protected]</h3>
    <p id="address">Gül sokak 33 numara aydoğan apartmanı kat xx istanbul sarıyer</p>
</div>

CSS

/**
 * Kart için CSS kodu
 */
.card {
    width: 400px;
    height: 200px;
    border-radius: 10px;
    background: #eee;
    border: 1px solid #333;
}

.card h1 {
    margin: 5px;
    padding: 0;
    font: bold 30px 'Comic Sans MS';
}

.card h2 {
    margin: 5px;
    padding: 0;
    font: bold 20px 'Comic Sans MS';
}

.card h3, .card p {
    margin: 5px;
    padding: 0;
    font: normal 20px "Open Sans", Helvetica, Arial, sans-serif;
}

JavaScript

$(document).ready(function () {
    // sınıfı listenChange olan elemanlara tıklanınca çalışacak fonksiyon
    $(".listenChange").change(function () {
        // tıklanan elemanın id'sini al
        var id = $(this).attr("class");
        // tıklanan elemanın değerini al
        var val = $(this).val();
        // tıklanan elemanın id'sinden 'Input' yazısını sil
        // mesela nameInput ise id'si, name kalacak elimizde
        var inputRemoved = id.replace("Input", "");
        // bu id ile bulacağımız elemanın içine input'daki değeri yaz
        $("#" + inputRemoved).html(val);
    });
});