Пользовательский список, содержащий элементы управления HTML

Question

Я ищу направление для лучшего способа создания / отображения элементов изображения.Это используется в качестве установщика расписания, который говорит: «С понедельника по пятницу мы открыты с 9 до 5», у них есть возможность нажать на знак «+», чтобы добавить вторую строку, где они могут сказать «Суббота и воскресенье, мы открыты 9»до 12 '.

Макет в изображении состоит из стандартных флажков для дней и ввода текста для времени

Я думал о создании частичного представления, которое создаст страницу, подобную изображению.Часть может содержать только:

<div class="hours-list">
</div>

Затем на главной странице, где я хочу показать это, выполните

@{Html.RenderPartial("_HoursOfOperation",new HoursOfOperationModel { args });}

То, с чем я борюсь, это что делать, когда плюсзнак нажал?Я думаю, что в частичном представлении есть код, который будет динамически добавлять код в div ниже существующего элемента.Что-то вроде (этот код будет в PartialView):

$(document).ready(function() {    
  $(add_button).click(function(e){ //on clicking '+' button
  e.preventDefault();

  $(.hours-list).append(' 
  <div class="hours-of-operation-list"> <span>Some controls go here</span> </div>'); 
}
});

На главной странице это будет примерно так:

<div class="some-class" style="overflow:auto">
  @{Html.RenderPartial("_HoursOfOperation",new HoursOfOperationModel { args  });}
</div>

Div на главной странице будет иметь автозапуск, потому чтоон будет находиться в гнезде других элементов управления, и мое пространство (по высоте) будет ограничено, но реальность такова, что не должно быть больше 3-4 строк, если это так.

Было бы это лучшим решением?о том, как создать список с элементами, которые включают компоненты HTML и использование Div с переполнением для его просмотра?Любые другие варианты, которые я пропустил?