JSFiddle - React, Tailwind, and code Playground

by rcravens

HTML

<h2>To God Be the Glory</h2>
<strong> T: </strong>Carlos
<strong> M: </strong>Carlos
<strong> M: </strong>test me 2
<strong> M: </strong>
<strong> buy mp3: </strong>test me 1
<br/><br/>
<div style="display:inline;position:relative;border:solid 0px #f00;" id="esplayer_2_tmpspan">
    <canvas id="esplayer_2" style="cursor:pointer;width:129px; height:39px;" width="129px" height="39px"></canvas>
</div>
<input type="hidden" id="esplayervar2" value="simple|esplayer_2|http://sembrare.com/wp-content/sembrare_002/John_1_In_The_Beginning_Carlos_Roberto.mp3||120px|30px|-0px|0.3||-999|-999|0|false|false|false||100|||">
<hr/><br/>

<h2>Example </h2>
<strong> T: </strong>yes
<strong> M: </strong>me
<strong> M: </strong>
<strong> M: </strong>
<strong> buy mp3: </strong>
<br/><br/>
<div style="display:inline;position:relative;border:solid 0px #f00;" id="esplayer_3_tmpspan">
    <canvas id="esplayer_3" style="cursor:pointer;width:129px; height:39px;" width="129px" height="39px"></canvas>
</div>
<input type="hidden" id="esplayervar3" value="simple|esplayer_3|Canto_de_los_Lideres_Joel_sierra.mp3||120px|30px|-0px|0.3||-999|-999|0|false|false|false||100|||">
<hr/><br/>

<form

JavaScript

(function($){
    
    
    $('canvas[id^="esplayer_"]').each(function(){
       var parent = $(this).parent();
        var id = $(this).attr('id') + '_check';
        parent.append('<input id="' + id + '" type="checkbox" /> add to cart ($5)');
    });
    
})(jQuery);