JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="rouwkaartCenterChoices divBackgroundChanger">
    1<input type="radio" name="q" 
    data-changebackground="https://www.topbloemen.nl/images_card/image.php?id=5"  
    data-changebackgroundtarget=".rouwkaart"/>
    2<input type="radio" name="q" 
    data-changebackground="https://www.topbloemen.nl/images_card/image.php?id=16"  
    data-changebackgroundtarget=".rouwkaart"/>
    3<input type="radio" name="q" 
    data-changebackground="https://www.topbloemen.nl/images_card/image.php?id=17"  
    data-changebackgroundtarget=".rouwkaart"/>
</div>

<div class="rouwkaart">
    <div class="divLeft"></div>
    <div class="divRight"><textarea rows="5" cols="25"></textarea></div>
</div>

CSS

body{margin:15px;}

.rouwkaart textarea{
    width:239px;
    height:108px;
    line-height:21px;
    padding-top:10px;
    padding-right:13px;
    padding-bottom:10px;
    padding-left:13px;  
    background:transparent;    

    background-color: transparent;
    letter-spacing: 1px;
    border:0;
    border-left:1px #ccc dashed;
}

.rouwkaart{
    width:530px;
    height:126px;    
}

.rouwkaart .divLeft{
    float:left;
    width:265px;
    height:126px; 
}

.rouwkaart .divRight{
    float:left;
    width:265px;
    height:126px; 
}

JavaScript

$.fn.backgroundChanger = function() {
    return this.each(function() {
        var $this = $(this);        

        $("[data-changebackground]",$this).addClass("backgroundChanger");
        
        if($('.backgroundChanger',$this).is(":checked")){      
            var ischecked = $('.backgroundChanger:checked',$this);
            var changebackgroundchecked = ischecked.attr('data-changebackground');  
            var changebackgroundtargetchecked = ischecked.attr('data-changebackgroundtarget');
            $(changebackgroundtargetchecked).css("background-image", "url(" + changebackgroundchecked + ")");              
        }else{
            var firstbackgrounnd = $('.backgroundChanger',$this).first();
            firstbackgrounnd.attr("checked",'checked')
            var changebackgroundchecked = firstbackgrounnd.attr('data-changebackground');  
            var changebackgroundtargetchecked = firstbackgrounnd.attr('data-changebackgroundtarget');
            $(changebackgroundtargetchecked).css("background-image", "url(" + changebackgroundchecked + ")");      
        }

        $('.backgroundChanger',$this).on('click', function () {
            var that = $(this);
            var changebackground = $(that,$this).attr('data-changebackground');
            var changebackgroundtarget = $(that,$this).attr('data-changebackgroundtarget');
            $(changebackgroundtarget).css("background-image", "url(" + changebackground + ")");                        
        });
    });
};
$('.divBackgroundChanger').backgroundChanger();