Make strings not appear in the same row – Blancer.com Tutorials and projects

I’m trying to create an order form where multiple lines can be added and keep things clean. This issue is when I send it to my DB it combines the lines. I want each item to be on it’s own line.

For example, I want to have the teacher name, submitted by and notes show item1, description1, etc. The only things that should repeat would be the teacher, submitted and notes.

I’ve tried everything, but this is a little past my comfort zone!

My SQL Result

Note: it doesn’t seem to like the php’s, so it doesn’t show completely accurate.

$(document).ready(function() {

  jQuery($ => {
    let $table = $('#articles');
    var id = "id" + Math.random().toString(16).slice(2)
    var teachername = $("#txt_teachername").val();
    var submittedby = $("#txt_submittedby").val();
    var notes = $("#txt_notes").val();
    var item = $("#txt_item").val();
    var description = $("#txt_description").val();
    var quantity = $("#txt_quantity").val();
    var vendor = $("#txt_vendor").val();


    $table.on('input', '.teachername, .submittedby, .notes, .item, .description, .quantity, .vendor', function() {
      let $row = $(this).closest('tr');
      var teachername = $row.find('.teachername').val();
      var submittedby = $row.find('.submittedby').val();
      var notes = $row.find('.notes').val();
      var item = $row.find('.item').val();
      var description = $row.find('.description').val();
      var quantity = $row.find('quantity').val();
      var vendor = $row.find('.vendor').val();
    })

    $table.on('click', '.btn-remove', function() {
      if ($table.find('tr').length > 1) // prevent deletion of all rows
        $(this).closest('tr').remove();
    })

    $table.on('click', '.btn-add', function() {
      let $clone = $table.find('tr:first').clone().appendTo($table);
      $clone.find('.teachername, .submittedby, .notes, .item, .description, .quantity, .vendor').val('');
    });


    if (submittedby != '') {
      $.ajax({
        type: "POST",
        url: "index.php",
        data: {
          teachername: teachername,
          submittedby: submittedby,
          notes: notes,
          item: item,
          description,
          description,
          quantity: quantity,
          vendor: vendor
        },
        dataType: 'JSON',

        //        success: function(){
        success: function(response) {

          $('.details').show();

          // selecting values from response Object
          var teachername = response.teachername;
          var submittedby = response.submittedby;
          var notes = response.notes;
          var item = response.item;
          var description = response.description;
          var quantity = response.quantity;
          var vendor = response.vendor;

          // setting values
          $('#teachername').text(teachername);
          $('#submittedby').text(submittedby);
          $('#notes').text(notes);
          $('#item').text(item);
          $('#description').text(description);
          $('#quantity').text(quantity);
          $('#vendor').text(vendor);
        }
      });
    }
  });
})

table tr:first-of-type td:last-of-type button {
  visibility: hidden;
}

.post-header {
  position: relative;
}

h1 {
  background-color: #121433;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 50px !important;
  font-weight: 400 !important;
  line-height: 50px;
  letter-spacing: 1px;
  padding: 40px 0 40px;
  text-align: center;
  border-bottom: double #555;
}

h2 {
  background-color: #121433;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 150px;
  letter-spacing: 2px;
  padding: 40px 0 40px;
  text-align: center;
  border-bottom: double #555;
}

h3 {
  background-color: #121433;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 150px;
  letter-spacing: 2px;
  padding: 40px 0 40px;
  text-align: center;
  border-bottom: double #555;
  border-color: #121433 !important;
}

.form-group {
  background-color: #121433;
}

.teacherinput {
  margin-top: 20px;
  display: block;
  width: 40%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.form-control-quantity {
  display: block;
  width: 90px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.form-control-item {
  display: block;
  width: 190px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.form-control-description {
  display: block;
  width: 400px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.rrjeshta {
  background-color: #121433 !important;
}

.all {
  background-color: #121433;
}

.container {
  background-color: #121433;
}

.page {
  background-color: #121433;
}

.table-responsive {
  background-color: #121433;
}

.table-bordered {
  background-color: #121433;
}

body {
  background-color: #121433;
}

head {
  background-color: #121433;
}

hr.style-four {
  height: 12px;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(220, 220, 220, 0.75);
}

.quantity {
  background-color: yellow;
}

p {
  color: #bbc3c8;
  font-family: 'Verdana', sans-serif;
  font-size: 16px;
  line-height: 26px;
  text-indent: 30px;
  margin: 0;
}

a {
  color: #c64119;
  border-bottom: 1px solid #c64119;
  text-decoration: none;
}

a:hover {
  color: #993213;
  border-bottom: 1px solid #993213;
}

.btn-info {
  color: #fff;
  background-color: #416cb5;
  border-color: #46b8da
}

.date {
  color: #bbc3c8;
  background: #292929;
  display: inline-block;
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 22px;
  position: absolute;
  bottom: -36px;
}

<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Order Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="style.css">

</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="script.js" type="text/javascript"></script>


<div class="all">
<h1>Order Form</h1>
<form action='getData.php' method="post" class='form'>
<div class="page">
<div class="container">
    <div class="form-group">
    <form name="orders" id="orders">
            <td><input  type="text" id="teachername" name="teachername[]" placeholder="Teacher / Classroom" class="teacherinput" /></td>
            
            <td><input  type="text" id="submittedby" name="submittedby[]" placeholder="Submitted By" class="teacherinput" /></td>
            <br>
            <td><input  type="text" name="notes[]" placeholder="Notes" class="form-control text" /></td>      
      <hr class="style-four">
      <div class="table-responsive">
        <table class="table table-bordered" id="articles">
          <tr class="rrjeshta">
            <td><input type="text" name="item[]" placeholder="Item # / ISBN-13" class="form-control-item" /></td>
            <td><input type="text" name="description[]" placeholder="Item Description" class="form-control-description" /></td>
            <td><input type="number" name="quantity[]" placeholder="Qty" class="form-control-quantity" /></td>
            <td><input type="text" name="vendor[]" placeholder="Vendor Name" class="form-control vendor" /></td>
            <td><button type="button" name="add" class="btn btn-success btn-add">Add new</button></td>
            <td><button type="button" name="remove" class="btn btn-danger btn-remove">X</button></td>
          </tr>
        </table>
        <input type="submit" class="btn btn-info" value="Submit" />
      </div>
    </form>
  </div>
</div>
</div>
<hr class="style-four">
<h2>To place an order please be sure to fill out this form as best as you can.<br><br>
You MAY combine as many vendors as you would like on this form!<br><br>
</div>
</body>

</html>

<?php
include "config.php";

$teachername = $_POST['teachername'];
$submittedby = $_POST['submittedby'];
$item = $_POST['item'];
$description = $_POST['description'];
$quantity = $_POST['quantity'];
$vendor = $_POST['vendor'];
$notes = $_POST['notes'];

$foundjquery = "Not found";
if(in_array('jQuery',$teachername)){
    $foundjquery = "found";
}
// Converting the array to comma separated string
$teachername = implode(",",$teachername);
$submittedby = implode(",",$submittedby);
$item = implode(",",$item);
$description = implode(",",$description);
$quantity = implode(",",$quantity);
$vendor = implode(",",$vendor);
$notes = implode(",",$notes);

$count = 1;

$insertquery = "INSERT INTO orderinfo(teachername,submittedby,item,description,quantity,vendor,notes) VALUES('".$teachername."','".$submittedby."','".$item."','".$description."','".$quantity."','".$vendor."','".$notes."')";
mysqli_query($con,$insertquery);

$return_arr = array('teachername'=>$teachername,'submittedby'=>$submittedby,'item'=>$item,'description'=>$description,'quantity'=>$quantity,'vendor'=>$vendor,'notes'=>$notes,"foundjquery"=>$foundjquery);

//echo json_encode($return_arr);


?>

  <html>
  <link rel="stylesheet" href="style.css">

  <body>
    <h3>Your order has been sucessfully submitted!
      <h3>
        <a href="index.php">
          <br>
          <input type="submit" class="btn btn-info" value="Submit another order" />
        </a>
  </body>

  </html>