Q:

How to dynamically mark input data?

It's hard to explain in writing, so I'll attach a photo 
Let me explain. I would really appreciate it if you understood.

After entering all the parts checked in the circle,
When you click the checked button,
I want to create a table dynamically and display the data in rows and columns.
At this point, what I was wondering is that once the data is entered for the very first time and the button is clicked,
 is created. However, from the second input, you should prevent the  tag from being generated and implement it so that the value is added only to the row and column.
I've been thinking a lot about implementing this feature, but I could not find an answer for me as a beginner.
How do I implement it to implement what I want to implement? I would appreciate it if you could tell me a little about it.

A:

Try this, may be this will help u

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div data-role="main" class="ui-content">
    <div data-role="collapsible" data-collapsed="true">
         <h1>Top 10</h1>
       

<div data-role="fieldcontain">
    <label for="ScoreRank">Rank:</label>
    <input type="text" name="ScoreRank" id="ScoreRank" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScoreID">ID:</label>
    <input type="text" name="ScoreID" id="ScoreID" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScoreCourse">Course:</label>
    <input type="text" name="ScoreCourse" id="ScoreCourse" value=""  />
</div>  

<div data-role="fieldcontain">
    <label for="ScoreTarget">Target</label>
    <input type="text" name="ScoreTarget" id="ScoreTarget" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScorePoints">Points</label>
    <input type="text" name="ScorePoints" id="ScorePoints" value=""  />
</div>  

 <button id="btn1">Add Scores</button>
   <div class="table-responsive"> 
   <table data-role="table" id="table-column-toggle" data-mode="columntoggle" border="1" class="table table-hover" style="display:none;">
      <thead>
        <tr>
          <th data-priority="2">Rank</th>
          <th>Student ID</th>
          <th data-priority="3">Course</th>
          <th data-priority="1">Meeting negotiated target</th>
          <th data-priority="5">Score (pts)</th>
        </tr>
      </thead>

      <tbody>
        
      </tbody>
    </table>
</div>
  </div>
</div>
<script>
$(document).ready(function(){
    $('#btn1').on('click',AddScore);
});

  function AddScore()
  {
    $('#table-column-toggle').show();
    var jqTableBody = $('#table-column-toggle tbody');
    var sTRTemplate = '<tr>' + 
        '    <td>{Rank}</td>' +
        '    <td>{Id}</td>' +
        '    <td>{Course}</td>' +
        '    <td>{Target}</td>' +
        '    <td>{Points}</td>' +
        '</tr>';

    var sTRAppend = sTRTemplate;

    $('div[data-role="fieldcontain"] input:text').each(function(){
      switch(this.id) {
        case 'ScoreRank' :  sTRAppend = sTRAppend.replace('{Rank}', this.value); break;
        case 'ScoreID' :  sTRAppend = sTRAppend.replace('{Id}', this.value); break;
        case 'ScoreCourse' :  sTRAppend = sTRAppend.replace('{Course}', this.value); break;
        case 'ScoreTarget' :  sTRAppend = sTRAppend.replace('{Target}', this.value); break;
        case 'ScorePoints' :  sTRAppend = sTRAppend.replace('{Points}', this.value); break;
                    }
    })
    jqTableBody.append(sTRAppend);
  }
</script>

</body>
</html>

