JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="room-rate">
    <table class="room1">
        <tbody>
            <tr>
                <td>
                    <label for="room1_opt1">nicht erstattungsfähig</label>
                </td>
                <td></td>
                <td>
                    <input type="radio" id="room1_opt1" name="room1" checked="checked" value="http://www.facebook.de" data-price="34€"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="room1_opt2">nicht erstattungsfähig, inkl. Frühstück</label>
                </td>
                <td>(+86€)</td>
                <td>
                    <input type="radio" name="room1" id="room1_opt2" value="http://www.google.de" data-price="104€"/>
                </td>
            </tr>
        </tbody>
    </table>
    <span class="price">34€</span>
<a class="btn" target="_blank" href="http://www.facebook.de">Jetzt buchen!</a>

</div>

JavaScript

(function ( $, window, document, undefined ) {
    var pluginName = "ratesConfigurator",
        defaults = {
            bookingLink: 'a.btn',
            price: 'span.price'
        };

    function RatesConfigurator( element, options ) {
        this.element = element;

        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    RatesConfigurator.prototype = {

        init: function() {
            var $this = $(this.element),
            bookingLink = $this.find(this.options.bookingLink),
            price = $this.find(this.options.price);
            console.log(bookingLink);
            $this.find('input[type="radio"]').on('change', function () {
                bookingLink[0].href = this.value;
                price.html($(this).data('price'));                
            });
        }
    };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new RatesConfigurator( this, options ));
            }
        });
    };

})( jQuery, window, document );
(function () {
    $('div.room-rate').ratesConfigurator();
})();