JSFiddle - React, Tailwind, and code Playground

by scispear

HTML

<div id="links_0">links go here</div>
<input id="urls_0" value="www.google.com www.facebook.com www.wikipedia.org">

<div id="links_1">links go here</div>
<input id="urls_1" value="www.google.com www.facebook.com www.wikipedia.org">

<div id="links_2">links go here</div>
<input id="urls_2" value="www.google.com www.facebook.com www.wikipedia.org">

CSS

input { display:none; width: 500px; padding: 2px 5px; }

JavaScript

$(function(){    
    // Update URLs
    var updateURL = function(key, urls){
        var input = $('#urls_'+key),
            links = $('#links_'+key).empty();
        
        $((urls || "").split(' ')).each(function(i,o){
            links.append('<a href="'+o+'">'+o+'</a> ');
        });        

        input.hide();
        links.show();
    };
    
    // Gets the key so I don't need to mess with a much of values...
    var key = function(obj){ return obj && obj.id && obj.id.split('_')[1] || ''; }

    // Handle click events
    $('div').dblclick(function(){
        $(this).hide();
        $('#urls_'+key(this)).show().focus();
        
        return false;
    }).click(function(evt){
        // Validate a single click vs double click.
        var target = evt.target;
        
        if(target.tagName.toLowerCase() === 'a'){            
            if(target.clicked = target.clicked === undefined ? true : !target.clicked){
                setTimeout(function(){
                    target.clicked && window.open(target.href);
                    target.clicked = false;
                }, 350);
            }
        }
        
        return false;
    });
    
    // Watching for change & setup call
    $('input').blur(function(){
        updateURL(key(this), $(this).val());
    }).blur();
});