html builder

by mrjordy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<div class="note">
<strong>note to self:</strong> go back to https://jsfiddle.net/mrjordy/j321z6ku/14/ for cleanup
</div>

<div id="box1" class="box inlineblock">
<input type="text" id="Link1" class ="inputLinkStyle inputStyle" placeholder="https://navy.deps.mil/peoeis/sites/nen/something"/>
<input type="text" id="Title1" class ="inputTitleStyle inputStyle" placeholder="box1"/>
<textarea id="Text1" class ="inputTextStyle inputStyle" placeholder="stuff"></textarea>
</div>

<div id="boxAdd2" class="inlineblock boxAddStyle displaynone"><div>+</div></div>
<div id="box2" class="box inlineblock displaynone">
<input type="text" id="Link2" class ="inputLinkStyle inputStyle" placeholder="https://navy.deps.mil/peoeis/sites/nen/something"/>
<input type="text" id="Title2" class ="inputTitleStyle inputStyle" placeholder="box2"/>
<textarea id="Text2" class ="inputTextStyle inputStyle" placeholder="stuff"></textarea>
</div>

<div id="boxAdd3" class="inlineblock boxAddStyle displaynone"><div>+</div></div>
<div id="box3" class="box inlineblock displaynone">
<input type="text" id="Link3" class ="inputLinkStyle inputStyle" placeholder="https://navy.deps.mil/peoeis/sites/nen/something"/>
<input type="text" id="Title3" class ="inputTitleStyle inputStyle" placeholder="box3"/>
<textarea id="Text3" class ="inputTextStyle inputStyle" placeholder="stuff"></textarea>
</div>

<div id="boxAdd4" class="inlineblock boxAddStyle displaynone"><div>+</div></div>
<div id="box4" class="box inlineblock displaynone">
<input type="text" id="Link4" class ="inputLinkStyle inputStyle" placeholder="https://navy.deps.mil/peoeis/sites/nen/something"/>
<input type="text" id="Title4" class ="inputTitleStyle inputStyle" placeholder="box4"/>
<textarea id="Text4" class ="inputTextStyle inputStyle" placeholder="stuff"></textarea>
</div>

<div id="boxAdd5" class="inlineblock boxAddStyle...

CSS

/*

<a href="###" class="noTextDecoration"><div class="ItemBlock"><div class="ItemTitle"><span>##TITLE##</span></div>
<p>##TEXT##</p></div></a>

*/
body {
  background: #f9f9f9;
}
.note {
  font-family: kalinga;
  font-size: 10px;
  color: grey;
  text-align: center;
  margin-bottom: 40px;
}
.red {
  color: red;
}
.inlineblock {
  display: inline-block;
}
.displaynone {
  display: none;
}
.box {
  margin: 10px;
}

.inputStyle {
  font-family: kalinga;
  border: none;
  display: block;
  width: 280px;
  padding: 0 4px;
}
.inputLinkStyle {
  font-size: 9px;
  background: none;
  height: 26px;
}
.inputTitleStyle {
    background: #3E628F;
    height: 34px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 20px;
    font-family: helvetica;
    color: white;
    text-align: center;
    display: block;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.18);
}

.inputTextStyle {
    font-family: "kalinga", "sans-serif";
    font-weight: bold;
    color: black;
    padding-bottom: 0px;
    padding-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    width: 266px;
    height: 140px;
    max-width: 266px;
    max-height: 140px;
    border: #ccc 1px solid;
    border-top: none;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.18);
}

.copyMe {
    background: rgba(255,255,255,.6);
    border: 1px solid #ccc;
    padding: 20px 10px;
    font-family: courier;
    font-size: 13px;
    margin-left: 10%;
    width: 80%;
}

.boxAddStyle {
    top: 88px;
    left: 10px;
    background: rgba(62, 98, 143, .03);
    height: 60px;
    width: 60px;
    border-radius: 8px;
    border: 1px solid rgba(62, 98, 143, .2);
    position: relative;
    vertical-align: top;
    font-weight: bold;
    line-height: 61px;
    color: #f9f9f9;
    cursor: pointer;
    transition: .1s;
    box-shadow: inset 0 0 7px rgba(62, 98, 143, .6);
    overflow: hidden;
}
.boxAddStyle > div {
    position:...

JavaScript

function updateBoxHtml(){
//-------------------------------------------------------- trying to find a way to use i++ instead of making 12 blocks

   var Link1 = document.getElementById('Link1').value;
   var boxLink1 = document.getElementById('boxLink1');
   boxLink1.innerHTML = Link1;
   
   var Title1 = document.getElementById('Title1').value;
   var boxTitle1 = document.getElementById('boxTitle1');
   boxTitle1.innerHTML = Title1;
   
   var Text1 = document.getElementById('Text1').value;
   var boxText1 = document.getElementById('boxText1');
   boxText1.innerHTML = Text1;

//--------------------------------------------------------------------------------------

   var Link2 = document.getElementById('Link2').value;
   var boxLink2 = document.getElementById('boxLink2');
   boxLink2.innerHTML = Link2;
   
   var Title2 = document.getElementById('Title2').value;
   var boxTitle2 = document.getElementById('boxTitle2');
   boxTitle2.innerHTML = Title2;
   
   var Text2 = document.getElementById('Text2').value;
   var boxText2 = document.getElementById('boxText2');
   boxText2.innerHTML = Text2;

//------------------------------------------------------------------------------------

   var Link3 = document.getElementById('Link3').value;
   var boxLink3 = document.getElementById('boxLink3');
   boxLink3.innerHTML = Link3;
   
   var Title3 = document.getElementById('Title3').value;
   var boxTitle3 = document.getElementById('boxTitle3');
   boxTitle3.innerHTML = Title3;
   
   var Text3 = document.getElementById('Text3').value;
   var boxText3 = document.getElementById('boxText3');
   boxText3.innerHTML = Text3;

//------------------------------------------------------------------------------------

   var Link4 = document.getElementById('Link4').value;
   var boxLink4 = document.getElementById('boxLink4');
   boxLink4.innerHTML = Link4;
   
   var Title4 = document.getElementById('Title4').value;
   var boxTitle4 = document.getElementById('boxTitle4');
  ...