How to Prepend New Lists

Question

Excuse me i am new in jquery, i tried to implement what I've learnt in prepend lesson, i made a simple form and wanted to prepend new lists after pressing Submit and this worked great, but the new created list isn't as same as the main one, because h3, p, and span don't have like the same div parent, how can i do that in prepend method or how to solve this in any way? , i tried the clone method but it wasn't good choice

$(function() {
  var counter = 0;
  $('#submit').on('click', function() {
    counter++;
    var myTitle = $('#title').val(),
      myTime = $('#time').val(),
      myDescription = $('#description').val();

    if (counter > 0) {
      $('.list').prepend('<li><h3>' + myTitle + '</h3></br><p>' + myDescription + '</p><span>' + myTime + '</span></li>');
    }

  });
});

input{
display: block
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list li {
  border-left: 2px solid #ccc;
  background: #f6f7f9;
}

.list li h3 {
  margin: 0;
  font-size: 14px;
  font-weight: inherit;
  color: red;
}

.list li p {
  font-size: 10px;
  font-weight: inherit
}

.list li span {
color: green;
}

.item {
  display: flex;
  padding: 10px;
}
.l-list {
  flex-basis: 50%;
  text-align: left;
}
.r-list {
  flex-basis: 50%;
  text-align: right
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li>
    <div class='item'>
      <div class="l-list">
        <h3>some title</h3>
        <p>some description here</p>
      </div>
      <div class="r-list">
        <span>02:45 PM</span>
      </div>
    </div>
  </li>
</ul>


<label>Title</label>
<input id='title' type="text">

<label>description</label>
<input id='description' type="text">

<input id='time' type="time">

<button id='submit' role="button">submit
                    </button>

Answer 1

Because you forgot to add these div:

<div class='item'>
<div class="l-list">
<div class="r-list">

You should append/prepend this:

"<li><div class='item'><div class='l-list'><h3>" + myTitle + "</h3></br><p>" + myDescription + "</p></div> <div class='r-list'><span>" + myTime + "</span> </div>    </div></li>"

Here is a demo code snippet:

$(function() {
  var counter = 0;
  $('#submit').on('click', function() {
    counter++;
    var myTitle = $('#title').val(),
      myTime = $('#time').val(),
      myDescription = $('#description').val();
   
    if (counter > 0) {
      $('.list').prepend("<li><div class='item'><div class='l-list'><h3>" + myTitle + "</h3></br><p>" + myDescription + "</p></div> <div class='r-list'><span>" + myTime + "</span> </div>    </div></li>");
    }

  });
});

input{
display: block
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list li {
  border-left: 2px solid #ccc;
  background: #f6f7f9;
}

.list li h3 {
  margin: 0;
  font-size: 14px;
  font-weight: inherit;
  color: red;
}

.list li p {
  font-size: 10px;
  font-weight: inherit
}

.list li span {
color: green;
}

.item {
  display: flex;
  padding: 10px;
}
.l-list {
  flex-basis: 50%;
  text-align: left;
}
.r-list {
  flex-basis: 50%;
  text-align: right
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li>
    <div class='item'>
      <div class="l-list">
        <h3>some title</h3>
        <p>some description here</p>
      </div>
      <div class="r-list">
        <span>02:45 PM</span>
      </div>
    </div>
  </li>
</ul>


<label>Title</label>
<input id='title' type="text">

<label>description</label>
<input id='description' type="text">

<input id='time' type="time">

<button id='submit' role="button">submit
                    </button>