Как создать разрыв между divs

Question

Привет, ребята, поэтому у меня есть функция php в моей базе данных, которая возвращает результаты поиска из моей базы данных. Все работает отдельно от лица, которое я хочу получить, чтобы произошел разрыв между каждым списком. Так, например, каждый возвращаемый элемент должен находиться внутри собственной границы, поэтому квадрат. На данный момент все элементы находятся на одном большом квадрате, а не на его собственной площади.

Код:

  $('#addButton').on('click', function(event) { 
       var searchedValue = $('#search_term').val(); 
       var divHolder = $('.selectedStuff'); 
       divHolder.append(searchedValue + '<br>').css({ 
        'background-color': 'yellow', 
        'width': '700px', 
        'margin-top': '50px', 
        'border-style': 'solid', 
        'border-color': '#0000ff' 
       }); 

Как вы можете видеть, я применил границу, однако его делать это вокруг все, а не каждый элемент, который возвращается, поэтому он должен выглядеть следующим образом:

----------------------------------------------- 
|            | 
|  Elment 1        | 
----------------------------------------------- 

----------------------------------------------- 
|            | 
|  Elment 2        | 
----------------------------------------------- 

Спасибо за помощь

Answer 1

Я не знаю точно, какое форматирование вы пытаетесь достичь, но я бы предложил обернуть ваш searchedValue в свой собственный div, чтобы вы могли форматировать это отдельно, изменив следующим образом:

  divHolder.append(searchedValue + '<br>').css({ 
       'background-color': 'yellow', 
       'width': '700px', 
       'margin-top': '50px', 
       'border-style': 'solid', 
       'border-color': '#0000ff' 
      }); 

к этому:

  $("<div>" + searchedValue + "</div>").css({ 
       'background-color': 'yellow', 
       'width': '700px', 
       'margin-top': '50px', 
       'border-style': 'solid', 
       'border-color': '#0000ff' 
      }).appendTo(divHolder);