JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<p>Click a label to add your links</p>

<p class="facebook link" data-type="facebook">
    <label for="facebook">Facebook</label>
    <input id="facebook" type="text" />
</p>
                
<p class="twitter link" data-type="twitter">
    <label for="twitter">twitter</label>
    <input id="twitter" type="text" />
</p>
      
<p class="tumblr link" data-type="tumblr">
    <label for="tumblr">tumblr</label>
    <input id="tumblr" type="text" />
</p>

CSS

p {padding:1em 2em;}

input {position:absolute;left:35%; padding:.3em;}

JavaScript

$('p input').hide();

$('p.link').on('click', 'label', function() {
    
    var $self = $(this);
    
    $('.link input').hide();
    
    $('.' + $self.closest('p').data('type') + ' input').show().css({
        "display": "inline-block",
        "position": "absolute",
        "left": "30%"
    });
    
});