JSFiddle - React, Tailwind, and code Playground

by chris27

HTML

<div id="tweetBtn">
    <a class="twitter-share-button" href="http://twitter.com/share" data-url="http://test.com" data-text="REPLACEME">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<br />
<form>
    <label for="tweetText">Tweet text:</label>            
    <input type="text" name="tweetText" id="tweetText" />
    <input type="submit" value="Update" id="tweetSubmit" />
</form>

JavaScript

$('#tweetSubmit').on('click', function(ev) {
    ev.preventDefault();
    // Remove existing iframe
    $('#tweetBtn iframe').remove();
    // Generate new markup
    var tweetBtn = $('<a></a>')
        .addClass('twitter-share-button')
        .attr('href', 'http://twitter.com/share')
        .attr('data-url', 'http://test.com')
        .attr('data-text', $('#tweetText').val());
    $('#tweetBtn').append(tweetBtn);
    twttr.widgets.load();
});