How to append elements to a form depending on the category's subcategories and tags?

I have 6 tables:

categories
id, name
subcategories
id, name
category_subcategory
id, category_id, subcategory_id
tags
id, name
category_tag
id, category_id, tag_id

these are the models Category.php

class Category extends Model
{
    public function subcategories()
    {
        return $this->belongsToMany('App\Subcategory');
    }

    public function tags()
    {
        return $this->belongsToMany('App\Tag');
    }
}

Subcategory.php

class SubCategory extends Model
{
    protected $table = 'subcategories';

    public function categories()
    {
        return $this->belongsToMany('App\Category');
    }
}

tags.php

class Tag extends Model
{
    public function categories()
    {
        return $this->belongsToMany('App\Category');
    }
}

with javascript i make a request to append a subcategory on select change

$("#category").change(function() {
    var form = $("#subcategory");
    var price = $('#price');
    var category = document.getElementById("category").value;

    if(category) {
        $.ajax({
                    url: '/advertise/public/subcategories/' + category,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {

                        for (var i = 0; i< Object.keys(data).length; i++) {
                            console.log(data[i].pivot.category_id);
                            if (parseInt(data[i].pivot.category_id) == 1) {
                                form.empty();
                                price.empty();

                                $('<div class="form-group">'
                                    + '<label>السعر</label>'
                                    + '<input type="number" class="form-control" name="price" placeholder="السعر">'
                                    + '</div>').appendTo(price);

                                $.each(data, function(key, value) {

                                    $('<label class="form-check-label btn btn-default" style="margin-left: 10px; margin-bottom: 10px; floar: right;">'
                                        + '<input class="form-check-input"' 
                                        + 'type="radio" name="subcategory" value="' + value.id + '" checked="checked"> ' + value.name + '</label></div>').appendTo(form);
                                });

                            }
                            else if (parseInt(data[i].pivot.category_id) == 2) {
                                form.empty();
                                price.empty();
                                $('<div class="form-group">'
                                    + '<label>الراتب</label>'
                                    + '<input type="number" class="form-control" name="salary" placeholder="الراتب">'
                                    + '</div>').appendTo(price);

                                $.each(data, function(key, value) {

                                    $('<label class="form-check-label btn btn-default" style="margin-left: 10px;">'
                                        + '<input class="form-check-input"' 
                                        + 'type="radio" name="subcategory" value="' + value.id + '" checked="checked"> ' + value.name + '</label></div>').appendTo(form);
                                });


                            }
                            else if (parseInt(data[i].pivot.category_id) == 7) {
                                form.empty();
                                price.empty();
                                $('<div class="form-group">'
                                    + '<label>السعر</label>'
                                    + '<input type="number" class="form-control" name="price" placeholder="السعر">'
                                    + '</div>').appendTo(price);

                                $.each(data, function(key, value) {

                                    $('<label class="form-check-label btn btn-default" style="margin-left: 10px; margin-bottom: 10px; floar: right;">'
                                        + '<input class="form-check-input"' 
                                        + 'type="radio" name="subcategory" value="' + value.id + '" checked="checked"> ' + value.name + '</label></div>').appendTo(form);
                                });


                            }

                        }
                    }
                });
            } else {
                $('select[name="subcategory"]').empty();
            }


});

and this route returns the subcategory foreach category

Route::get('subcategories/{id}', function($id) {
    $category = App\Category::find($id);
    return $category->subcategories;
});

and this route returns the tags foreach category

Route::get('tags/{id}', function($id) {
    $category = App\Category::find($id);
    return $category->tags;
});

this code works for subcategories but I want to append the subcategories and tags for each category on select change for example: category 1 has 2 subcategories and 2 tags, so i want to append 2 check boxes for each subcategory and 2 check boxes for each tag

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2kd3Zx4
via IFTTT