ElementByIdを２つに分けたい。

js初心者です。
現在、下記で、categoryを取得し、
onclickでcategoryに紐づくtaskを取得して描画しています。

やりたいこととして
ElementByIdをcategory、taskに分けてLaravelで表示したいと考えています。

何か良い方法があれば、ご教示ください。

js
1// category
2function CategoryRenderRows(props){
3    return props.categoies.map(category => {
4        return (
5            <tr key={category.id}>
6                <div class="list-group-item">
7                    <a href="#" onClick={() => props.getCurrentTasks(category)} >{category.title}</a>
8                </div>
9            </tr>
10        );
11    });
12}
13
14// task
15function TaskRenderRows(props){
16    return props.tasks.map(task => {
17        return (
18            <tr key={task.id}>
19                <td>{task.title}</td>
20                <td><button className="btn btn-secondary">完了</button></td>
21            </tr>
22        );
23    });
24}
25
26export class Category extends Component
27{
28    constructor()
29    {
30        super();
31        this.state = {
32            categoies: [],
33            tasks: []
34        };
35        this.getCurrentTasks = this.getCurrentTasks.bind(this);
36    }
37
38    // category All get
39    componentDidMount(){
40        axios
41            .get('/api/getAllCategories')
42            .then((res) => {
43                this.setState({
44                    categoies: res.data
45                });
46            })
47            .catch(error => {
48                console.log(error)
49            })
50    }
51
52    getCurrentTasks(category)
53    {
54        axios
55            .get('/api/getTasks/', {params: {id :category.id}})
56            .then((res) => {
57                this.setState({
58                    tasks: res.data
59                });
60            })
61            .catch(error => {
62                console.log(error);
63            });
64    }
65
66    render() {
67        return (
68            <React.Fragment>
69                
70                {/* table */}
71                <table className="table mt-5">
72                    <tbody>
73                        {/* 行の描画 */}
74                        <CategoryRenderRows
75                            categoies={this.state.categoies}
76                            getCurrentTasks={this.getCurrentTasks}
77                        />
78                    </tbody>
79                </table>
80
81                <table className="table mt-5">
82                    <tbody>
83                        {/* 行の描画 */}
84                        <TaskRenderRows
85                            tasks={this.state.tasks}
86                        />
87                    </tbody>
88                </table>
89          </React.Fragment>
90        );
91    }
92}
93
94ReactDOM.render(
95    <Category />, document.getElementById('category'));

Laravel
1  <main>
2    <div class="container">
3      <div class="row">
4        <div class="col col-md-4">
5          <nav class="panel panel-default">
6            <div class="panel-heading">Category</div>
7            <div class="panel-body">
8              <a href="#" class="btn btn-default btn-block">
9                AddCategory
10              </a>
11            </div>
12            <div class="list-group">
13              <!-- category -->
14              <div id="category"></div>
15            </div>
16          </nav>
17        </div>
18        <div class="column col-md-8">
19          <div class="panel panel-default">
20            <div class="panel-heading">AddTask</div>
21              <div class="panel-body">
22                <a href="#" class="btn btn-default btn-block">
23                  AddTask
24                </a>
25              </div>
26              <!-- task -->
27              <div id="task"></div>
28            </div>
29          </div>
30        </div>
31    </div>
32  </main>