Unique Link

by Dannah

HTML

<div class="option-container" style="width:200px; float:left">
    <div class="optionlist">
        <div class="option-title">Food Set A</div>
<span class="select-addon">SELECT </span>

        <div class="option-nid">132</div>
    </div>
    <div class="optionlist">
        <div class="option-title">Food Set B</div>
<span class="select-addon">SELECT </span>

        <div class="option-nid">133</div>
    </div>
    <div class="optionlist">
        <div class="option-title">Food Set C</div>
<span class="select-addon">SELECT </span>

        <div class="option-nid">134</div>
    </div>
    <br/>
    <br/>
    <br/>
    <ol id="your-addons"></ol>
<a href="food-option=0&talent-option=0" class="food-form-select-food">LINK</a>

</div>
<div class="option-container col-md-6">
    <div class="optionlist">
        <div class="option-title">Food Set A</div>
<span class="select-addon">SELECT </span>

        <div class="option-nid">132</div>
    </div>
    <div class="optionlist">
        <div class="option-title">Food Set B</div>
<span class="select-addon">SELECT </span>

        <div class="option-nid">133</div>
    </div>
    <div class="optionlist">
        <div class="option-title">Food Set C</div>
<span class="select-addon">SELECT </span>

        <div class="option-nid">134</div>
    </div>
    <br/>
    <br/>
    <br/>
    <ol id="your-addons"></ol>
<a href="food-option=0&talent-option=0" class="food-form-select-food">LINK</a>

</div>

CSS

.option-nid {
    display:none;
}
.addnid2 {
    display:none;
}

JavaScript

$(document).ready(function () {

    $(".select-addon").click(function () {

        var addtitle = $(this).closest('.optionlist').find('.option-title').html();
        var addnid = $(this).closest('.optionlist').find('.option-nid').html();
        var html = '<li class="option-list">' + addtitle + '<div class="addnid2">' + addnid + '</div><span class="remove-addons"> Remove</span></li>';
        $(this).closest(".option-container").find('#your-addons').append(html);

        $(this).closest(".option-container").find("a.food-form-select-food").each(function () {
            var _href = $(this).attr("href");
            $(this).attr("href", _href + ',' + addnid);
        });

    });

    $(document).on('click', '.remove-addons', function () {
        var addnid2 = $(this).closest('.option-list').find('.addnid2').html();
        $(this).closest(".option-container").find("a.food-form-select-food").each(function () {
            var href = $(this).attr('href');
            $(this).attr('href', href.replace("," + addnid2, ""));
        });
        $(this).closest('li').remove()
    });

});