JSFiddle - React, Tailwind, and code Playground

by Muhammad Mushtaq Sheikh

HTML

<div class="address">
    <div class="street">North Terrace</div>
        <div>
            <span class="city">Adelaide</span>
            <span class="state">SA</span>
            <span class="postcode">5000</span>
        </div>
        <button class="edit" data-id="1">Edit</button>
    </div>
 </div>
<div class="address">
    <div class="street">Burke Street</div>
        <div>
            <span class="city">Melbourne</span>
            <span class="state">VIC</span>
            <span class="postcode">3000</span>
        </div>
        <button class="edit" data-id="2">Edit</button>
    </div>
 </div>

<div id="newaddress">
    <div class="address">
        <div class="street"></div>
        <div>
            <span class="city"></span>
            <span class="state"></span>
            <span class="postcode"></span>
        </div>
        <button class="edit">Edit</button>
    </div>
</div>
<button id="new">New</button>

<div id="dialog-mask">
    <div id="dialog">
        <form>
            <div>
                <label for="Street">Street</label>
                <input type="text" id="Street" />
            </div>
            <div>
                <label for="Street">City</label>
                <input type="text" id="City" />
            </div>
            <div>
                <label for="Street">State</label>
                <input type="text" id="State" />
            </div>
            <div>
                <label for="Street">Post Code</label>
                <input type="text" id="PostCode" />
            </div>
            <input type="submit" />
        </form>
    </div>
</div>

CSS

label {
    display: inline-block;
    width:100px;
}
input[type="submit"] {
    margin-left: 104px;
}
#newaddress {
    display: none;
}
#dialog-mask {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
}
#dialog {
    width: 450px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -225px;
    border: solid 1px #aaa;
    border-radius: 5px;
    background-color: white;
    padding: 10px;
}

JavaScript

var url = '@Url.Action("EditAddress", "Test")';
var id = $('#ID');
var street = $('#Street');
var city = $('#City');
var state = $('#State');
var postcode = $('#PostCode');
var dialog = $('#dialog-mask');
var button;

$(document).on('click', '.edit', function() {
    button = $(this);
    var address = button.closest('.address');
    id.val($(this).data('id'));
    street.val(address.find('.street').text());
    city.val(address.find('.city').text());
    state.val(address.find('.state').text());
    postcode.val(address.find('.postcode').text());
    dialog.show().find('input').first().focus();
});
$('#new').click(function () {
    button = null;
    dialog.show().find('input').first().focus();
});
$('form').submit(function (e) {
    e.preventDefault();
    // if (!$('form').valid()) {
        // return;
    // }
    var data = $('form').serialize();
    // $.post(url, data, function (data) {
        // if (data.ID) {
            if (button) {
                var address = button.closest('.address');
                button.data('id', data.ID);
            } else {
                var address = $('#newaddress').clone();
                address.find('button').data('id', data.ID);
            }
            address.find('.street').text(street.val());
            address.find('.city').text(city.val());
            address.find('.state').text(state.val());    
            address.find('.postcode').text(postcode.val())
            if (!button) {
                $('#new').before(address.html());
            }
            $("form")[0].reset();
            dialog.hide();
        // } else if (data.Error) {

        // }
    // });  
})