JSFIDDLE not working on my page
<p>I got a JSFIDDLE and trying to get it to work on my web form but it is not woorking. Can anyone please tell me what mistake i am making. The JSFIDDLE is working perfectly fine but i am not able to get it to work at my page only. This is the link to the fiddle: <a href="http://jsfiddle.net/Ywzjv/2/" rel="nofollow">LINK</a></p>

<p>And this is how i am trying to use it :</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
var devices = ['computer', 'router']
var device_types = {
    'computer': ['laptop', 'desktop'],
    'router': ['wireless', 'bluetooth']
}

var brands = {
    'laptop': ['HP', 'DELL'],
    'desktop': ['Apple', 'MAC'],
    'wireless':['Foo','Bar'],
    'bluetooth':['Grren','Blue']
}


function createOptions(arr) {
    var html = ['&lt;option &gt;--select--&lt;/option&gt;'];
    $.each(arr, function(i, item) {
        html.push('&lt;option value="' + item + '"&gt;' + item + '&lt;/option&gt;')
    });
    return html.join('');
}

var mainOptions = createOptions(devices)

$(function() {
    $("input[type=button][value=Add]").click(function(e) {
        for (i = 0; i &lt; document.getElementById('sel').value; i++) {
            e.preventDefault();
            var j = 1;

            var newDiv = $('&lt;div class="row"&gt;').appendTo("#dropbox");
            $("&lt;select class='devices has_dependents'&gt;").attr("name", "input1_" + j).append(mainOptions).appendTo(newDiv)

            $("&lt;select class='device_types has_dependents'&gt;").attr("name", "input2_" + j).appendTo(newDiv)
            $("&lt;select class='brands'&gt;").attr("name", "input3_" + j).appendTo(newDiv)
            $("&lt;input&gt;").attr("name", "input4_" + j).appendTo(newDiv);
            $("&lt;button&gt;").text("Remove").appendTo(newDiv).click(function(e) {
                e.preventDefault();
                $(this).parent().remove();
            })
            j++;
        }
    });

    $(document).on('change', 'select.has_dependents', function() {
        var val = $(this).val(),
            option_obj;
        if ($(this).is('.devices')) {
            option_obj = device_types;
        } else {
            option_obj = brands;
        }


        var options = createOptions( option_obj[val]);


        $(this).next().html(options)
    })
})
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form&gt;
    &lt;select id="sel"&gt;
        &lt;option value="" selected="selected"&gt;&lt;/option&gt;
        &lt;option value="01" &gt;01&lt;/option&gt;
        &lt;option value="02" &gt;02&lt;/option&gt;
        &lt;option value="03" &gt;03&lt;/option&gt;
        &lt;option value="04" &gt;04&lt;/option&gt;
        &lt;option value="05" &gt;05&lt;/option&gt;
        &lt;option value="06" &gt;06&lt;/option&gt;
        &lt;option value="07" &gt;07&lt;/option&gt;
        &lt;option value="08" &gt;08&lt;/option&gt;
        &lt;option value="09" &gt;09&lt;/option&gt;
        &lt;option value="10" &gt;10&lt;/option&gt;
        &lt;option value="11" &gt;11&lt;/option&gt;
        &lt;option value="12" &gt;12&lt;/option&gt;
        &lt;option value="13" &gt;13&lt;/option&gt;
        &lt;option value="14" &gt;14&lt;/option&gt;
        &lt;option value="15" &gt;15&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="button" value="Add" /&gt;

    &lt;div id="dropbox"&gt;&lt;/div&gt;
&lt;/form&gt;​
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
