JSFiddle - React, Tailwind, and code Playground

by Ray Mak

HTML

<button class="edit">Edit</button>
<button class="read hide">Read only</button>
<div id="myDiv" class="readonly">
    <select class="dropdown">
        <option value="1">Coke</option>
    </select>
</div>
<p id="data" class="message">Read only mode</p>

CSS

.hide {
    display: none;
}

JavaScript

var dropdown = function (evt) {
    evt.preventDefault();
    if ($('#myDiv').hasClass('readonly')) {
        $('#data').html("Current mode is readonly.");
    } else {
        $('.dropdown').append("<option value='2'>Pepsi</option>");
        $('.dropdown').append("<option value='3'>Dr. Pepper</option>");
    }
};

$('.edit').click(function (evt) {
    $('.dropdown').off('click', dropdown);
    $('#myDiv').removeClass('readonly');
    $('.edit').hide();
    $('.read').show();
    $('#data').html("Current mode is edit.");
    $('.dropdown').one('click', dropdown);

})
$('.read').click(function (evt) {
    $('.edit').show();
    $('.read').hide();
    $('#myDiv').addClass('readonly');
    $('#data').html("Current mode is readonly.");
})

$('.dropdown').one('click', dropdown);