Unique Link

by mz_arain08

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");
                var splited = _href.split('&');
                $(this).attr("href", splited[0] + ',' + addnid+'&'+splited[1]);
            });

        });

        $(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()
        });

    });